Browse Source

feat: 空调温度调整

珍珍 4 weeks ago
parent
commit
6c75ec3d44

File diff suppressed because it is too large
+ 1 - 1
dist/sgh5/index.html


dist/sgh5/static/css/chunk-2e0a88af.4a0e7e5f.css → dist/sgh5/static/css/chunk-03ee2bea.4a0e7e5f.css


dist/sgh5/static/css/chunk-2e0a88af.4a0e7e5f.css.gz → dist/sgh5/static/css/chunk-03ee2bea.4a0e7e5f.css.gz


File diff suppressed because it is too large
+ 1 - 0
dist/sgh5/static/css/chunk-4200c316.40f8a952.css


BIN
dist/sgh5/static/css/chunk-4200c316.40f8a952.css.gz


File diff suppressed because it is too large
+ 0 - 1
dist/sgh5/static/css/chunk-87c37bec.b5271468.css


BIN
dist/sgh5/static/css/chunk-87c37bec.b5271468.css.gz


File diff suppressed because it is too large
+ 1 - 1
dist/sgh5/static/js/app.7398e54c.js


BIN
dist/sgh5/static/js/app.2bd8056b.js.gz


BIN
dist/sgh5/static/js/app.7398e54c.js.gz


File diff suppressed because it is too large
+ 1 - 0
dist/sgh5/static/js/chunk-03ee2bea.8f8df432.js


BIN
dist/sgh5/static/js/chunk-03ee2bea.8f8df432.js.gz


dist/sgh5/static/js/chunk-27676557.3e06b77e.js → dist/sgh5/static/js/chunk-27676557.29a883d2.js


dist/sgh5/static/js/chunk-27676557.3e06b77e.js.gz → dist/sgh5/static/js/chunk-27676557.29a883d2.js.gz


File diff suppressed because it is too large
+ 0 - 1
dist/sgh5/static/js/chunk-2e0a88af.6e61b16a.js


BIN
dist/sgh5/static/js/chunk-2e0a88af.6e61b16a.js.gz


File diff suppressed because it is too large
+ 7 - 0
dist/sgh5/static/js/chunk-4200c316.324ae270.js


BIN
dist/sgh5/static/js/chunk-4200c316.324ae270.js.gz


File diff suppressed because it is too large
+ 0 - 7
dist/sgh5/static/js/chunk-87c37bec.aba32607.js


BIN
dist/sgh5/static/js/chunk-87c37bec.aba32607.js.gz


+ 57 - 9
src/views/envmonitor/taiguv1/components/Air/index.vue

@@ -23,7 +23,7 @@
           <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
         </div>
         <div class="temp" v-if="isOpen">
-          {{ realTemp }}
+          {{ airData.airTemp }}
           <sup>℃</sup>
         </div>
       </div>
@@ -97,16 +97,17 @@ export default defineComponent({
       airData: {
         minTempSet: 16,
         maxTempSet: 32,
-        airTemp: 0,
+        airTemp: 24,
       },
       part: 1,
       realTemp: 24,
       isWhite: false,
-      barWidth: 73,
+      barWidth: 30,
       getAirStatus() {
         if (proxyData.isOpen) {
           nextTick(() => {
             proxyData.endBoxSwiper();
+            proxyData.setBarNowPerstion();
           });
         }
         contx.emit("getStatus", proxyData.isOpen);
@@ -119,6 +120,38 @@ export default defineComponent({
           return 1;
         }
       },
+      setBarNowPerstion() {
+        proxyData.realTemp = proxyData.airData.airTemp;
+        let barBox = document.querySelector("#barAirId");
+        if (!barBox) {
+          return;
+        }
+        let sliderBox = document.querySelector("#sliderAirId");
+        let sliderWidth = proxyData.getEleWidth(sliderBox);
+        if (
+          proxyData.airData.airTemp >= proxyData.airData.minTempSet &&
+          proxyData.airData.airTemp <= proxyData.airData.maxTempSet
+        ) {
+          let barWidth =
+            (proxyData.airData.airTemp - proxyData.airData.minTempSet) / proxyData.part;
+          // left = Math.floor(left);
+          if (barBox) {
+            barBox.style.width = barWidth + "px";
+          }
+        } else {
+          if (!proxyData.airData.airTemp) {
+            // barBox.style.width = 30 + "px";
+            proxyData.barWidth = 30;
+          } else if (proxyData.airData.airTemp < proxyData.airData.minTempSet) {
+            // barBox.style.width = 30 + "px";
+            proxyData.barWidth = 30;
+          } else if (proxyData.airData.airTemp > proxyData.airData.maxTempSet) {
+            let barWidth = barBox.offsetWidth;
+            // barBox.style.width = sliderWidth + "px";
+            proxyData.barWidth = barWidth;
+          }
+        }
+      },
       endBoxSwiper() {
         let sliderBox = document.querySelector("#sliderAirId");
         let handBox = document.querySelector("#handAirId");
@@ -133,7 +166,7 @@ export default defineComponent({
           (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
           (sliderWidth - 30);
         let part = tempPart;
-        proxyData.part = tempPart;
+        proxyData.part = part;
         if (!handBox) {
           return;
         }
@@ -145,12 +178,16 @@ export default defineComponent({
         });
         handBox.addEventListener("touchend", function (e) {
           isMove = false;
+          proxyData.airData.airTemp = proxyData.realTemp;
+          //
         });
         swiper(handBox, {
           swipeLeft: function (e) {
             if (isMove) {
               let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
+              moveRealX = parseInt(moveRealX);
               let barWidth = startBarWidth - moveRealX;
+              barWidth = parseInt(barWidth);
               barWidth = barWidth < 30 ? 30 : barWidth;
               if (barWidth >= sliderWidth) {
                 proxyData.isWhite = true;
@@ -158,7 +195,8 @@ export default defineComponent({
                 proxyData.isWhite = false;
               }
 
-              barBox.style.width = barWidth + "px";
+              // barBox.style.width = barWidth + "px";
+              proxyData.barWidth = barWidth;
               let realTemp = proxyData.airData.minTempSet + barWidth * part;
               if (realTemp > proxyData.airData.maxTempSet) {
                 realTemp = proxyData.airData.maxTempSet;
@@ -166,20 +204,30 @@ export default defineComponent({
               if (realTemp) {
                 proxyData.realTemp = fix(realTemp.toFixed(1));
               }
+              console.log("barWidth===", barWidth);
+              if (barWidth <= 30) {
+                proxyData.realTemp = 16;
+              }
             }
           },
           swipeRight: function (e) {
             if (isMove) {
               let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
+              moveRealX = parseInt(moveRealX);
               let barWidth = startBarWidth + moveRealX;
-              barWidth = barWidth > sliderWidth ? sliderWidth : barWidth;
+              console.log("moveRealX==", moveRealX);
+
+              barWidth = parseInt(barWidth);
+              barWidth = barWidth = barWidth > sliderWidth ? sliderWidth : barWidth;
               if (barWidth >= sliderWidth) {
                 proxyData.isWhite = true;
               } else {
                 proxyData.isWhite = false;
               }
-              barBox.style.width = barWidth + "px";
+              // barBox.style.width = barWidth + "px";
+              proxyData.barWidth = barWidth;
 
+              console.log("barWidth===", barWidth);
               let realTemp = barWidth * part + proxyData.airData.minTempSet;
               if (realTemp > proxyData.airData.maxTempSet) {
                 realTemp = proxyData.airData.maxTempSet;
@@ -231,8 +279,8 @@ export default defineComponent({
       align-items: end;
       .temp {
         //styleName: En/H2;
-        width: 80px;
-        text-align: right;
+        width: 60px;
+        // text-align: right;
         font-family: Jost;
         font-size: 20px;
         font-weight: 300;

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

@@ -8,31 +8,40 @@
         alt=""
       />
       <div class="top-right">
-        <Switch class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" />
+        <Switch
+          @change="getvolumnStatus"
+          class="switch-btn"
+          inactive-color="rgba(0, 0, 0, 0.3)"
+          v-model="isOpen"
+        />
       </div>
     </div>
     <div class="bottom">
-      <div class="air-info">
+      <div class="volumn-info">
         <div class="left">
           <div class="text">音量</div>
           <div class="status">已关闭</div>
         </div>
-        <div class="temp" v-if="isOpen">26</div>
+        <div class="temp" v-if="isOpen">{{ volumnData.volumnTemp }}</div>
       </div>
-      <div class="temp-box" v-if="isOpen">
+      <div class="temp-box" id="slidervolumnId" 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">{{ volumnData.minTempSet }}</div>
+          <div class="active-bar" :style="{ width: barWidth + 'px' }" id="barvolumnId">
+            <div class="hand-box" id="handvolumnId">
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="text text-right" :class="isWhite ? 'active-text' : ''">
+            {{ volumnData.maxTempSet }}
           </div>
-          <div class="text text-right">100</div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import {
   defineComponent,
   onMounted,
@@ -43,10 +52,11 @@ import {
   onUnmounted,
   onBeforeMount,
   onBeforeUnmount,
+  nextTick,
 } from "vue";
 import { Switch, Dialog, Loading, Toast } from "vant";
-import { parseImgUrl } from "@/utils";
-import any = jasmine.any;
+import { parseImgUrl, fix } from "@/utils";
+import { swiper } from "@/utils/swiper";
 
 export default defineComponent({
   components: {
@@ -58,6 +68,152 @@ export default defineComponent({
     const proxyData = reactive({
       parseImgUrl: parseImgUrl,
       isOpen: false,
+      volumnData: {
+        minTempSet: 0,
+        maxTempSet: 100,
+        volumnTemp: 30,
+      },
+      part: 1,
+      realTemp: 30,
+      isWhite: false,
+      barWidth: 30,
+      getvolumnStatus() {
+        if (proxyData.isOpen) {
+          nextTick(() => {
+            proxyData.endBoxSwiper();
+            proxyData.setBarNowPerstion();
+          });
+        }
+        contx.emit("getStatus", proxyData.isOpen);
+      },
+      getEleWidth(ele) {
+        // debugger;
+        if (ele) {
+          return ele.getBoundingClientRect().width;
+        } else {
+          return 1;
+        }
+      },
+      setBarNowPerstion() {
+        proxyData.realTemp = proxyData.volumnData.volumnTemp;
+        let barBox = document.querySelector("#barvolumnId");
+        if (!barBox) {
+          return;
+        }
+        let sliderBox = document.querySelector("#slidervolumnId");
+        let sliderWidth = proxyData.getEleWidth(sliderBox);
+        if (
+          proxyData.volumnData.volumnTemp >= proxyData.volumnData.minTempSet &&
+          proxyData.volumnData.volumnTemp <= proxyData.volumnData.maxTempSet
+        ) {
+          let barWidth =
+            (proxyData.volumnData.volumnTemp - proxyData.volumnData.minTempSet) /
+            proxyData.part;
+          // left = Math.floor(left);
+          if (barBox) {
+            barBox.style.width = barWidth + "px";
+          }
+        } else {
+          if (!proxyData.volumnData.volumnTemp) {
+            // barBox.style.width = 30 + "px";
+            proxyData.barWidth = 30;
+          } else if (proxyData.volumnData.volumnTemp < proxyData.volumnData.minTempSet) {
+            // barBox.style.width = 30 + "px";
+            proxyData.barWidth = 30;
+          } else if (proxyData.volumnData.volumnTemp > proxyData.volumnData.maxTempSet) {
+            let barWidth = barBox.offsetWidth;
+            // barBox.style.width = sliderWidth + "px";
+            proxyData.barWidth = barWidth;
+          }
+        }
+      },
+      endBoxSwiper() {
+        let sliderBox = document.querySelector("#slidervolumnId");
+        let handBox = document.querySelector("#handvolumnId");
+        let barBox = document.querySelector("#barvolumnId");
+        let isMove = false;
+        let sliderWidth = proxyData.getEleWidth(sliderBox);
+        let startBarWidth = proxyData.getEleWidth(barBox);
+        if (sliderWidth > 1) {
+          sliderWidth = sliderWidth;
+        }
+        let tempPart =
+          (proxyData.volumnData.maxTempSet - proxyData.volumnData.minTempSet) /
+          (sliderWidth - 30);
+        let part = tempPart;
+        proxyData.part = part;
+        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;
+          proxyData.volumnData.volumnTemp = proxyData.realTemp;
+          //
+        });
+        swiper(handBox, {
+          swipeLeft: function (e) {
+            if (isMove) {
+              let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
+              moveRealX = parseInt(moveRealX);
+              let barWidth = startBarWidth - moveRealX;
+              barWidth = parseInt(barWidth);
+              barWidth = barWidth < 30 ? 30 : barWidth;
+              if (barWidth >= sliderWidth) {
+                proxyData.isWhite = true;
+              } else {
+                proxyData.isWhite = false;
+              }
+
+              // barBox.style.width = barWidth + "px";
+              proxyData.barWidth = barWidth;
+              let realTemp = proxyData.volumnData.minTempSet + barWidth * part;
+              if (realTemp > proxyData.volumnData.maxTempSet) {
+                realTemp = proxyData.volumnData.maxTempSet;
+              }
+              if (realTemp) {
+                proxyData.realTemp = fix(realTemp.toFixed(1));
+              }
+              console.log("barWidth===", barWidth);
+              if (barWidth <= 30) {
+                proxyData.realTemp = 0;
+              }
+            }
+          },
+          swipeRight: function (e) {
+            if (isMove) {
+              let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
+              moveRealX = parseInt(moveRealX);
+              let barWidth = startBarWidth + moveRealX;
+              console.log("moveRealX==", moveRealX);
+
+              barWidth = parseInt(barWidth);
+              barWidth = barWidth = barWidth > sliderWidth ? sliderWidth : barWidth;
+              if (barWidth >= sliderWidth) {
+                proxyData.isWhite = true;
+              } else {
+                proxyData.isWhite = false;
+              }
+              // barBox.style.width = barWidth + "px";
+              proxyData.barWidth = barWidth;
+
+              console.log("barWidth===", barWidth);
+              let realTemp = barWidth * part + proxyData.volumnData.minTempSet;
+              if (realTemp > proxyData.volumnData.maxTempSet) {
+                realTemp = proxyData.volumnData.maxTempSet;
+              }
+              if (realTemp) {
+                proxyData.realTemp = fix(realTemp.toFixed(1));
+              }
+            }
+          },
+        });
+      },
     });
     onBeforeUnmount(() => {});
     onMounted(() => {});
@@ -91,7 +247,7 @@ export default defineComponent({
   .bottom {
     // margin-top: 18vh;
     // margin-top: 109px;
-    .air-info {
+    .volumn-info {
       display: flex;
       justify-content: space-between;
       align-items: end;
@@ -173,11 +329,17 @@ export default defineComponent({
         width: 73px;
         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/index.vue

@@ -324,7 +324,7 @@ export default defineComponent({
     // height: auto;
     //height: 120%;
     width: 110%;
-    height: auto;
+    height: 100vh;
     // height: 120%;
     // height: 100vh;
   }