瀏覽代碼

fix:空调模块的样式修改

chenzhen2 1 年之前
父節點
當前提交
05a79b826b

File diff suppressed because it is too large
+ 5 - 0
public/images/ipdImages/tongfeng-small.svg


+ 17 - 0
src/styles/index.scss

@@ -209,6 +209,23 @@ div:focus {
   }
 }
 
+.child-switch {
+  width: 33px !important;
+  height: 16px !important;
+
+  .van-switch__node {
+    width: 16px !important;
+    height: 16px !important;
+
+  }
+}
+
+.van-switch--on.child-switch {
+  .van-switch__node {
+    transform: translate(calc(33px - 16px)) !important;
+  }
+}
+
 
 
 

+ 51 - 42
src/views/envmonitor/components/Air/ChildAirControl.vue

@@ -11,7 +11,10 @@
         <div class="control-box">
           <div class="temp-slider" id="chlidAirSliderId">
             <div class="slider-bar" id="chlidAirBarId">
-              <div class="bar-circle" id="chlidAirBarId"></div>
+              <div
+                class="bar-circle"
+                style="border: 2px solid rgba(246, 249, 254, 1)"
+              ></div>
             </div>
             <div class="temp-left">
               {{ airData.minTempSet }}
@@ -80,8 +83,8 @@
         <div class="air-title">
           <div>模式</div>
           <div></div>
-          <div v-if="airData.workMode === 1">制</div>
-          <div v-else-if="airData.workMode === 2">制</div>
+          <div v-if="airData.workMode === 1">制</div>
+          <div v-else-if="airData.workMode === 2">制</div>
           <div v-else>通风</div>
         </div>
         <div class="control-box control-box-padding">
@@ -93,13 +96,13 @@
             >
               <img
                 :src="
-                  airData.workMode === 1
-                    ? parseImgUrl('ipdImages', 'airsunred.svg')
-                    : parseImgUrl('ipdImages', 'airsunblack.svg')
+                  airData.workMode === 2
+                    ? parseImgUrl('ipdImages', 'aircoldblue.svg')
+                    : parseImgUrl('ipdImages', 'aircoldblack.svg')
                 "
               />
             </div>
-            <span>制</span>
+            <span>制</span>
           </div>
           <div class="icon-box">
             <div
@@ -109,13 +112,13 @@
             >
               <img
                 :src="
-                  airData.workMode === 2
-                    ? parseImgUrl('ipdImages', 'aircoldblue.svg')
-                    : parseImgUrl('ipdImages', 'aircoldblack.svg')
+                  airData.workMode === 1
+                    ? parseImgUrl('ipdImages', 'airsunred.svg')
+                    : parseImgUrl('ipdImages', 'airsunblack.svg')
                 "
               />
             </div>
-            <span>制</span>
+            <span>制</span>
           </div>
           <div class="icon-box">
             <div
@@ -285,8 +288,7 @@ export default defineComponent({
         ) {
           // 正常温度范围
           let left: any =
-            ((proxyData.airTemp - proxyData.airData.minTempSet) / 0.5) *
-            proxyData.part;
+            (proxyData.airTemp - proxyData.airData.minTempSet) / proxyData.part;
           left = Math.floor(left);
           if (barBox) {
             barBox.style.left = left + "px";
@@ -299,10 +301,20 @@ export default defineComponent({
           } else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
             let sliderWidth: any = sliderBox.offsetWidth;
             let barWidth: any = barBox.offsetWidth;
-            barBox.style.left = sliderWidth - barWidth + "px";
+            barBox.style.left =
+              sliderWidth - barWidth + proxyData.sliderPading + "px";
           }
         }
       },
+      // 获取元素的宽度
+      getEleWidth(ele: any) {
+        // debugger;
+        if (ele) {
+          return ele.getBoundingClientRect().width;
+        } else {
+          return 1;
+        }
+      },
       // 滑动
       endBoxSwiper() {
         proxyData.swiperIinit = true;
@@ -311,12 +323,20 @@ export default defineComponent({
         let sliderBox: any = document.querySelector("#chlidAirSliderId");
         let isMove: any = false;
         let barLeft: any = 0;
-        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
-        let barWidth: any = barBox ? barBox.offsetWidth : 20;
+        proxyData.sliderPading = 2;
+        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
+        let barWidth: any = proxyData.getEleWidth(barBox);
+
+        if (sliderWidth > 1) {
+          sliderWidth = sliderWidth - barWidth;
+        }
+        console.log("sliderWidth==", sliderWidth, barWidth);
+
         let tempPart =
-          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) / 20;
-        let part: any = 0.5 / (tempPart / (Math.floor(sliderWidth) / 22));
-        proxyData.part = part;
+          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
+          sliderWidth;
+        let part: any = tempPart;
+        proxyData.part = tempPart;
         if (!handBox) {
           return;
         }
@@ -339,8 +359,8 @@ export default defineComponent({
               let left: any = barLeft - moveRealX;
               left = left < 0 ? 0 : left;
               barBox.style.left = left + "px";
-              proxyData.realTemp =
-                proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
+              proxyData.realTemp = left * part + proxyData.airData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
             }
           },
           swipeRight: function (e: any) {
@@ -348,13 +368,10 @@ export default defineComponent({
               barLeft = Math.abs(barLeft);
               let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
               let left: any = barLeft + moveRealX;
-              left = left > sliderWidth ? sliderWidth - barWidth : left;
-              barBox.style.left = left + "px";
-              proxyData.realTemp =
-                proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
-              if (proxyData.realTemp > proxyData.airData.maxTempSet) {
-                proxyData.realTemp = proxyData.airData.maxTempSet;
-              }
+              left = left > sliderWidth ? sliderWidth : left;
+              proxyData.realTemp = left * part + proxyData.airData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
+              barBox.style.left = left + proxyData.sliderPading + "px";
             }
           },
         });
@@ -626,23 +643,15 @@ export default defineComponent({
 
       .slider-bar {
         position: absolute;
-        width: 25px;
         left: 0;
-        bottom: -3px;
+        top: 50%;
+        transform: translateY(-50%);
         z-index: 333;
-        .bar-temp {
-          padding-bottom: 10px;
-          font-family: "Persagy";
-          font-size: 12px;
-          font-weight: 400;
-          line-height: 14px;
-          letter-spacing: 0px;
-          text-align: left;
-          color: rgba(98, 108, 120, 1);
-        }
+        width: 32px;
+        height: 32px;
         .bar-circle {
-          width: 32px;
-          height: 32px;
+          width: 30px;
+          height: 30px;
           background: #fff;
           border-radius: 50%;
           box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),

+ 67 - 93
src/views/envmonitor/components/Air/manualIndex.vue

@@ -55,9 +55,13 @@
         <div class="temp-slider" id="sliderId">
           <div class="slider-bar" id="barId">
             <div class="bar-temp">{{ realTemp }}℃</div>
-            <div class="bar-circle" id="handId"></div>
+            <div
+              class="bar-circle"
+              style="border: 2px solid rgba(255, 255, 255, 1)"
+              id="handId"
+            ></div>
           </div>
-          <div class="temp-left" id="tempLeftId">
+          <div class="temp-left" id="tempManualLeftId">
             {{ airData.minTempSet }}
           </div>
           <div class="temp-right">
@@ -185,7 +189,10 @@
               <span>制冷模式</span>
             </div>
             <div class="text-box" v-else>
-              <img :src="parseImgUrl('ipdImages', 'wind_small.svg')" alt="" />
+              <img
+                :src="parseImgUrl('ipdImages', 'tongfeng-small.svg')"
+                alt=""
+              />
               <span>通风模式</span>
             </div>
           </div>
@@ -194,7 +201,6 @@
             :model-value="childItem.isOpen"
             class="child-switch"
             inactive-color="rgba(196, 196, 196, 0.4)"
-            size="14px"
           />
         </div>
 
@@ -394,36 +400,41 @@ export default defineComponent({
       setBarNowPerstion() {
         proxyData.realTemp = proxyData.airTemp;
         let barBox: any = document.querySelector("#barId");
-        // console.log("设置温度位置---");
-        // console.log(barBox)
         if (!barBox) {
           return;
         }
         let sliderBox: any = document.querySelector("#sliderId");
+        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
         if (
           proxyData.airTemp >= proxyData.airData.minTempSet &&
           proxyData.airTemp <= proxyData.airData.maxTempSet
         ) {
-          // 正常温度范围
           let left: any =
-            ((proxyData.airTemp - proxyData.airData.minTempSet) / 0.5) *
-            proxyData.part;
+            (proxyData.airTemp - proxyData.airData.minTempSet) / proxyData.part;
           left = Math.floor(left);
           if (barBox) {
             barBox.style.left = left + "px";
           }
         } else {
           if (!proxyData.airTemp) {
-            barBox.style.left = 0 + "px";
+            barBox.style.left = 0;
           } else if (proxyData.airTemp < proxyData.airData.minTempSet) {
-            barBox.style.left = 0 + "px";
+            barBox.style.left = 0;
           } else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
-            let sliderWidth: any = sliderBox.offsetWidth;
             let barWidth: any = barBox.offsetWidth;
-            barBox.style.left = sliderWidth - barWidth + "px";
+            barBox.style.left =
+              sliderWidth - barWidth + proxyData.sliderPading + "px";
           }
         }
       },
+      getEleWidth(ele: any) {
+        // debugger;
+        if (ele) {
+          return ele.getBoundingClientRect().width;
+        } else {
+          return 1;
+        }
+      },
       // 滑动
       endBoxSwiper() {
         proxyData.swiperIinit = true;
@@ -432,12 +443,17 @@ export default defineComponent({
         let sliderBox: any = document.querySelector("#sliderId");
         let isMove: any = false;
         let barLeft: any = 0;
-        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
-        let barWidth: any = barBox ? barBox.offsetWidth : 20;
+        proxyData.sliderPading = 2;
+        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
+        let barWidth: any = proxyData.getEleWidth(barBox);
+        if (sliderWidth > 1) {
+          sliderWidth = sliderWidth - barWidth;
+        }
         let tempPart =
-          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) / 20;
-        let part: any = 0.5 / (tempPart / (Math.floor(sliderWidth) / 22));
-        proxyData.part = part;
+          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
+          sliderWidth;
+        let part: any = tempPart;
+        proxyData.part = tempPart;
         if (!handBox) {
           return;
         }
@@ -460,8 +476,8 @@ export default defineComponent({
               let left: any = barLeft - moveRealX;
               left = left < 0 ? 0 : left;
               barBox.style.left = left + "px";
-              proxyData.realTemp =
-                proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
+              proxyData.realTemp = left * part + proxyData.airData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
             }
           },
           swipeRight: function (e: any) {
@@ -469,13 +485,10 @@ export default defineComponent({
               barLeft = Math.abs(barLeft);
               let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
               let left: any = barLeft + moveRealX;
-              left = left > sliderWidth ? sliderWidth - barWidth : left;
-              barBox.style.left = left + "px";
-              proxyData.realTemp =
-                proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
-              if (proxyData.realTemp > proxyData.airData.maxTempSet) {
-                proxyData.realTemp = proxyData.airData.maxTempSet;
-              }
+              left = left > sliderWidth ? sliderWidth : left;
+              proxyData.realTemp = left * part + proxyData.airData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
+              barBox.style.left = left + proxyData.sliderPading + "px";
             }
           },
         });
@@ -1104,13 +1117,6 @@ export default defineComponent({
         width: 130px;
         height: 64px;
       }
-
-      // .switch-btn {
-      //   position: absolute;
-      //   z-index: 111;
-      //   bottom: -5px;
-      //   right: 25px;
-      // }
     }
   }
   .top-switch {
@@ -1141,9 +1147,9 @@ export default defineComponent({
         border-radius: 21px;
       }
     }
-    .switch-btn {
-      margin-top: 0;
-    }
+    // .switch-btn {
+    //   margin-top: 0;
+    // }
   }
   .line {
     width: 100%;
@@ -1224,11 +1230,6 @@ export default defineComponent({
             color: rgba(196, 201, 207, 1);
           }
         }
-
-        .child-switch {
-          // height: 20px;
-          // width: 50px;
-        }
       }
 
       .control-bottom {
@@ -1266,22 +1267,14 @@ export default defineComponent({
       justify-content: space-between;
     }
     .volume-box {
-      .text {
-        font-family: "PingFang SC";
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 17px;
-        letter-spacing: 0px;
-        color: rgba(196, 201, 207, 1);
-      }
       .number {
         span {
           font-family: "Persagy";
           font-size: 12px;
           font-weight: 400;
+          padding-right: 8px;
           line-height: 24px;
           letter-spacing: 0px;
-          padding-right: 8px;
           color: rgba(196, 201, 207, 1);
         }
         .number-active {
@@ -1294,8 +1287,24 @@ export default defineComponent({
         }
       }
       .model {
-        font-size: 14px;
-        color: #1f2429;
+        font-family: "PingFang SC";
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: 0px;
+      }
+      .text {
+        font-family: "PingFang SC";
+        display: block;
+        font-size: 13px;
+        font-weight: 400;
+        padding-top: 3px;
+        margin-left: -3px;
+        transform: scale(0.9);
+        text-align: left;
+        // line-height: 17px;
+        letter-spacing: 0px;
+        color: rgba(196, 201, 207, 1);
       }
     }
     .volume-icon {
@@ -1366,7 +1375,6 @@ export default defineComponent({
           width: 30px;
           height: 30px;
           background: rgba(246, 249, 254, 1);
-          border: 2px solid rgba(255, 255, 255, 1);
           border-radius: 50%;
           box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
         }
@@ -1385,10 +1393,13 @@ export default defineComponent({
         color: rgba(98, 108, 120, 1);
       }
       .temp-left {
-        left: 8px;
+        left: 0px;
+        padding-left: 8px;
       }
       .temp-right {
-        right: 8px;
+        right: 0px;
+        padding-right: 8px;
+        text-align: left;
       }
     }
     .control-text {
@@ -1407,41 +1418,4 @@ export default defineComponent({
   }
 }
 </style>
-<style lang="scss">
-.air {
-  .loading-box {
-    .van-loading {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-  .van-loading__spinner {
-    color: $elActiveColor !important;
-  }
-
-  .van-switch__loading {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    line-height: 1;
-  }
-
-  .van-switch--disabled {
-    opacity: 0.5;
-  }
-  .child-control-box {
-    .child-switch {
-      // position: relative;
-      .van-switch__node {
-        // margin-top: -6px;
-        // width: 20px !important;
-        // height: 20px !important;
-      }
-    }
-  }
-}
-</style>
   

+ 0 - 1
src/views/envmonitor/components/FloorHeating/index.vue

@@ -82,7 +82,6 @@
               active-color="$elActiveColor"
               v-model="item.switch"
               :loading="item.loading"
-              size="14px"
               @click.stop="eqChangeSwitch('child', item)"
               inactive-color="rgba(196, 196, 196, 0.2)"
               class="child-switch"