Parcourir la source

fix:地暖功能

chenzhen2 il y a 1 an
Parent
commit
aecad3e6fe

+ 174 - 319
src/views/envmonitor/components/FloorHeating/ChildTempSet.vue

@@ -1,28 +1,25 @@
 <template>
   <div class="light-temp">
     <div class="light-tep-top">
-      <span>氛围灯</span>
+      <span>地暖</span>
     </div>
-    <div class="bright-box" v-if="lightData.bright">
+    <div class="bright-box">
       <div class="bight-text">
-        <span>亮度</span>
-        <span>{{ lightData.brightValueRate }}%</span>
+        <span>温度调节</span>
+        <span>{{ realTemp ? realTemp : "--" }}℃</span>
       </div>
-      <div class="light-control">
-        <div class="bight-slider" id="sliderId1">
-          <div class="item-now" :style="{ width: itemWidth }"></div>
-          <div class="slider-bar" id="handId1"></div>
-        </div>
-      </div>
-    </div>
-    <div class="bright-box" v-if="lightData.colorTemperature">
-      <div class="bight-text">
-        <span>色温</span>
-        <span>{{ lightData.colorTempValueRate }}%</span>
-      </div>
-      <div class="light-control">
-        <div class="bight-slider temp-slider" id="sliderId2">
-          <div class="slider-bar" id="handId2"></div>
+      <div class="control-box">
+        <div class="temp-slider" id="slideFloorId2">
+          <div class="slider-bar" id="barFloorId2">
+            <!-- <div class="bar-temp">{{ realTemp }}℃</div> -->
+            <div class="bar-circle" id="handFloorId2"></div>
+          </div>
+          <div class="temp-left" style="width: 22px">
+            {{ floorData.minTempSet }}
+          </div>
+          <div class="temp-right" style="width: 22px">
+            {{ floorData.maxTempSet }}
+          </div>
         </div>
       </div>
     </div>
@@ -50,7 +47,7 @@ import any = jasmine.any;
 
 export default defineComponent({
   props: {
-    lightData: {
+    floorData: {
       type: Object,
       default: () => {},
     },
@@ -63,304 +60,129 @@ export default defineComponent({
     const proxyData = reactive({
       lampSw: false,
       itemWidth: "0%",
-      lightData: props.lightData,
+      realTemp: 0,
+      part: 0,
+      floorData: props.floorData,
       swiperIinit: false,
       // 状态控制调整
       setSpaceContrl(data: any) {
         setSpaceCondtioners(data).then((res: any) => {});
       },
-      timeTemp: timeTemp,
-      timeTempNum: 1,
-      timeColor: timeColor,
-      timeColorNum: 1,
-      getTimeNum(newTime: any = "") {
-        let time: any = (new Date().getTime() - newTime) / 1000;
-        let num: any = parseInt(time);
-        if (num == 1) {
-          return true;
+      getEleWidth(ele: any) {
+        // debugger;
+        if (ele) {
+          return ele.getBoundingClientRect().width;
         } else {
-          return false;
-        }
-      },
-      // 改变当前空间设置的值
-      changContrlVal(type: any, tmerType: any = 2) {
-        let data: any = [];
-        if (type == 1) {
-          if (
-            proxyData.lightData.brightValue < proxyData.lightData.brightMinValue
-          ) {
-            proxyData.lightData.brightValue =
-              proxyData.lightData.brightMinValue;
-          }
-          proxyData.lightData.brightValue = Math.floor(
-            proxyData.lightData.brightValue
-          );
-          data = [
-            {
-              id: proxyData.lightData.id,
-              code: "brightSet",
-              value: proxyData.lightData.brightValue,
-            },
-          ];
-          if (tmerType == 2) {
-            if (proxyData.getTimeNum(proxyData.timeTemp)) {
-              proxyData.setSpaceContrl(data);
-              proxyData.timeTemp = new Date().getTime();
-            }
-          } else {
-            proxyData.setSpaceContrl(data);
-          }
-        } else if (type == 2) {
-          if (
-            proxyData.lightData.colorTempValue <
-            proxyData.lightData.colorTempMinValue
-          ) {
-            proxyData.lightData.colorTempValue =
-              proxyData.lightData.colorTempMinValue;
-          }
-          proxyData.lightData.colorTempValue = Math.floor(
-            proxyData.lightData.colorTempValue
-          );
-          data = [
-            {
-              id: proxyData.lightData.id,
-              code: "colorTemperatureSet",
-              value: proxyData.lightData.colorTempValue,
-            },
-          ];
-          if (tmerType == 2) {
-            if (proxyData.getTimeNum(proxyData.timeColor)) {
-              proxyData.setSpaceContrl(data);
-              proxyData.timeColor = new Date().getTime();
-            }
-          } else {
-            proxyData.setSpaceContrl(data);
-          }
-        }
-      },
-      // 控制结束处理
-      changContrlValEnd(type: any) {
-        if (type == 1) {
-          proxyData.changContrlVal(1, 1);
-        } else if (type == 2) {
-          proxyData.changContrlVal(2, 1);
-        }
-      },
-      // 定时控制
-      setTimeContrl(type: any) {
-        if (type == 1) {
-          proxyData.timeTemp = new Date().getTime();
-        } else if (type == 2) {
-          proxyData.timeColor = new Date().getTime();
-        }
-      },
-      // 设置调节滚动条的最大值和最小值
-      setLightDataMax() {
-        proxyData.lightData.brightMaxValue = proxyData.lightData.brightMaxValue
-          ? proxyData.lightData.brightMaxValue
-          : 100;
-        proxyData.lightData.colorTempMaxValue = proxyData.lightData
-          .colorTempMaxValue
-          ? proxyData.lightData.colorTempMaxValue
-          : 100;
-      },
-      // 计算滚动条样式的值
-      setBarValue(type: any, sliderWidth: any, left: any, barWidth: any) {
-        proxyData.setLightDataMax();
-        if (type == 1) {
-          //  亮度
-          let value: any =
-            proxyData.lightData.brightMaxValue -
-            proxyData.lightData.brightMinValue;
-          let bright: any = value / (sliderWidth - barWidth);
-          let rate: any = 100 / value;
-          proxyData.lightData.brightValueRate = left * bright * rate;
-          proxyData.lightData.brightValueRate = Math.floor(
-            proxyData.lightData.brightValueRate
-          );
-          let width: any =
-            proxyData.lightData.brightValueRate >= 98
-              ? 98
-              : proxyData.lightData.brightValueRate;
-          proxyData.lightData.brightValue =
-            proxyData.lightData.brightValueRate * rate;
-          proxyData.itemWidth = left + barWidth / 2 + "px";
-        } else if (type == 2) {
-          let value: any =
-            proxyData.lightData.colorTempMaxValue -
-            proxyData.lightData.colorTempMinValue;
-          // 色温
-          let colorVal: any = value / (sliderWidth - barWidth);
-          let rate: any = 100 / value;
-          proxyData.lightData.colorTempValueRate = left * colorVal * rate;
-          proxyData.lightData.colorTempValueRate = Math.floor(
-            proxyData.lightData.colorTempValueRate
-          );
-          proxyData.lightData.colorTempValue =
-            proxyData.lightData.colorTempValueRate * rate;
-        }
-      },
-      // 根据当前值设置页面的位置
-      getDefaultVal(type: any, sliderWidth: any, barWidth: any, handBox: any) {
-        // console.log("调用了----");
-        let left: any = "";
-        if (type == 1) {
-          proxyData.lightData.brightValue =
-            proxyData.lightData.brightValue <=
-            proxyData.lightData.brightMinValue
-              ? 0
-              : proxyData.lightData.brightValue;
-          if (
-            proxyData.lightData.brightValue > proxyData.lightData.brightMaxValue
-          ) {
-            proxyData.lightData.brightValue =
-              proxyData.lightData.brightMaxValue;
-          }
-          let bright: any =
-            proxyData.lightData.brightMaxValue / (sliderWidth - barWidth);
-          let rate: any = 100 / proxyData.lightData.brightMaxValue;
-          // debugger;
-          left = proxyData.lightData.brightValue / rate / bright / rate;
-          proxyData.lightData.brightValueRate = Math.floor(
-            proxyData.lightData.brightValue / rate
-          );
-          proxyData.itemWidth = left + barWidth / 2 + "px";
-        } else if (type == 2) {
-          proxyData.lightData.colorTempValue =
-            proxyData.lightData.colorTempValue <=
-            proxyData.lightData.colorTempMinValue
-              ? 0
-              : proxyData.lightData.colorTempValue;
-          if (
-            proxyData.lightData.colorTempValue >
-            proxyData.lightData.colorTempMaxValue
-          ) {
-            proxyData.lightData.colorTempValue =
-              proxyData.lightData.colorTempMaxValue;
-          }
-          let colorVal: any =
-            proxyData.lightData.colorTempMaxValue / (sliderWidth - barWidth);
-          let rate: any = 100 / proxyData.lightData.colorTempMaxValue;
-          left = proxyData.lightData.colorTempValue / rate / colorVal / rate;
-          proxyData.lightData.colorTempValueRate = Math.floor(
-            proxyData.lightData.colorTempValue / rate
-          );
+          return 1;
         }
-        handBox.style.left = left + "px";
       },
-      //亮度滑块滑动
+      // 滑动
       endBoxSwiper() {
         proxyData.swiperIinit = true;
-        let handBox: any = document.querySelector("#handId1");
-        let sliderBox: any = document.querySelector("#sliderId1");
+        let handBox: any = document.querySelector("#handFloorId2");
+        let barBox: any = document.querySelector("#barFloorId2");
+        let sliderBox: any = document.querySelector("#slideFloorId2");
+        let sliderPadingL: any = 24;
+        let sliderPadingR: any = 24;
         let isMove: any = false;
         let barLeft: any = 0;
-        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
-
+        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
+        let barWidth: any = proxyData.getEleWidth(barBox);
+        if (sliderWidth > 1) {
+          sliderWidth = sliderWidth - sliderPadingR - sliderPadingL - barWidth;
+        }
+        let tempPart =
+          (proxyData.floorData.maxTempSet - proxyData.floorData.minTempSet) /
+          sliderWidth;
+        console.log("tempPart==", tempPart);
+        let part: any = tempPart;
+        proxyData.part = part;
         if (!handBox) {
           return;
         }
-        let barWidth: any = handBox.getBoundingClientRect().width;
-        proxyData.getDefaultVal(1, sliderWidth, barWidth, handBox);
-
         handBox.addEventListener("touchstart", function (e: any) {
-          barLeft = isNaN(parseInt(handBox.style.left))
+          barLeft = isNaN(parseInt(barBox.style.left))
             ? 0
-            : parseInt(handBox.style.left);
+            : parseInt(barBox.style.left);
           isMove = true;
-          proxyData.setTimeContrl(1);
         });
         handBox.addEventListener("touchend", function (e: any) {
           isMove = false;
-          proxyData.changContrlValEnd(1);
+          // proxyData.changeZongAir("temp", proxyData.realTemp);
+          // proxyData.heatingTemp = proxyData.realTemp;
         });
-
         swiper(handBox, {
           swipeLeft: function (e: any) {
             if (isMove) {
               barLeft = Math.abs(barLeft);
               let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
               let left: any = barLeft - moveRealX;
-              left = left < 0 ? 0 : left;
-              // debugger
-              handBox.style.left = left + "px";
-              proxyData.setBarValue(1, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(1);
+              left = left < sliderPadingL ? sliderPadingL : left;
+              barBox.style.left = left + "px";
+              proxyData.realTemp =
+                (left - sliderPadingL) * part + proxyData.floorData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
             }
           },
           swipeRight: function (e: any) {
-            // debugger;
             if (isMove) {
               barLeft = Math.abs(barLeft);
               let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
               let left: any = barLeft + moveRealX;
               left =
-                left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
-              handBox.style.left = left + "px";
-              proxyData.setBarValue(1, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(1);
+                left > sliderWidth + sliderPadingR
+                  ? sliderWidth + sliderPadingR
+                  : left;
+              barBox.style.left = left + "px";
+              proxyData.realTemp =
+                (left - sliderPadingL) * part + proxyData.floorData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
             }
           },
         });
       },
-      // 色温滑块滑动
-      tempBoxSwiper() {
-        proxyData.swiperIinit = true;
-        let handBox: any = document.querySelector("#handId2");
-        let sliderBox: any = document.querySelector("#sliderId2");
-        let isMove: any = false;
-        let barLeft: any = 0;
-        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
-        if (!handBox) {
+      // 设置温度条的位置
+      setBarNowPerstion() {
+        proxyData.realTemp =
+          proxyData.floorData && proxyData.floorData.tempSet
+            ? proxyData.floorData.tempSet
+            : 0;
+        let barBox: any = document.querySelector("#barFloorId2");
+        if (!barBox) {
           return;
         }
-        let barWidth: any = handBox.getBoundingClientRect().width;
-        proxyData.getDefaultVal(2, sliderWidth, barWidth, handBox);
-        handBox.addEventListener("touchstart", function (e: any) {
-          barLeft = isNaN(parseInt(handBox.style.left))
-            ? 0
-            : parseInt(handBox.style.left);
-          isMove = true;
-          proxyData.setTimeContrl(2);
-        });
-        handBox.addEventListener("touchend", function (e: any) {
-          isMove = false;
-          proxyData.changContrlValEnd(2);
-        });
-
-        swiper(handBox, {
-          swipeLeft: function (e: any) {
-            if (isMove) {
-              barLeft = Math.abs(barLeft);
-              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
-              let left: any = barLeft - moveRealX;
-              left = left < 0 ? 0 : left;
-              // debugger
-              handBox.style.left = left + "px";
-              proxyData.setBarValue(2, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(2);
-            }
-          },
-          swipeRight: function (e: any) {
-            // debugger;
-            if (isMove) {
-              barLeft = Math.abs(barLeft);
-              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
-              let left: any = barLeft + moveRealX;
-              left =
-                left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
-              handBox.style.left = left + "px";
-              proxyData.setBarValue(2, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(2);
-            }
-          },
-        });
+        let sliderBox: any = document.querySelector("#slideFloorId2");
+        if (
+          proxyData.realTemp !== 0 &&
+          proxyData.realTemp >= proxyData.floorData.minTempSet &&
+          proxyData.realTemp <= proxyData.floorData.maxTempSet
+        ) {
+          // 正常温度范围
+          let left: any =
+            (proxyData.realTemp - proxyData.floorData.minTempSet) /
+            proxyData.part;
+          left = Math.floor(left) + 24;
+          if (barBox) {
+            barBox.style.left = left + "px";
+          }
+        } else {
+          if (!proxyData.realTemp) {
+            barBox.style.left = 24 + "px";
+          } else if (proxyData.realTemp < proxyData.floorData.minTempSet) {
+            barBox.style.left = 24 + "px";
+          } else if (proxyData.realTemp > proxyData.floorData.maxTempSet) {
+            let sliderWidth: any = sliderBox.offsetWidth;
+            let barWidth: any = barBox.offsetWidth;
+            barBox.style.left = sliderWidth - barWidth + "px";
+          }
+        }
       },
+
       // 初始化滑动
       async barSwiperInit() {
         nextTick(() => {
           proxyData.endBoxSwiper();
-          proxyData.tempBoxSwiper();
+          proxyData.setBarNowPerstion();
         });
       },
     });
@@ -369,7 +191,7 @@ export default defineComponent({
     onBeforeUnmount(() => {});
     onMounted(() => {
       proxyData.barSwiperInit();
-      console.log("proxyData.lightData===",proxyData.lightData)
+      console.log("proxyData.floorData===", proxyData.floorData);
     });
     return {
       ...toRefs(proxyData),
@@ -381,75 +203,108 @@ export default defineComponent({
 .light-temp {
   padding: 10px;
   .light-tep-top {
-    display: flex;
-    padding-bottom: 60px;
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 22px;
     line-height: 31px;
-    justify-content: space-between;
-    span {
-      font-family: "PingFang SC";
-      font-style: normal;
-      font-weight: 500;
-      font-size: 22px;
-
-      color: #000000;
-    }
+    color: #000000;
+    padding-bottom: 48px;
   }
   .bright-box {
     margin-bottom: 60px;
     .bight-text {
-      display: flex;
-      justify-content: space-between;
-      padding-bottom: 15px;
+      padding-bottom: 46px;
       span {
-        font-family: "PingFang SC";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 18px;
-        line-height: 25px;
-        color: #1b2129;
+        &:nth-child(1) {
+          font-family: "PingFang SC";
+          font-style: normal;
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 22px;
+          color: #1b2129;
+          padding-right: 12px;
+        }
+        &:nth-child(2) {
+          padding-left: 12px;
+          font-family: "Persagy";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 19px;
+          text-align: right;
+          color: #1b2129;
+          border-left: 1px solid #e1e5eb;
+        }
       }
     }
-    .light-control {
-      .bight-slider {
+    .control-box {
+      display: flex;
+      justify-content: space-between;
+      .temp-slider {
         position: relative;
         display: flex;
         height: 32px;
         flex: 1;
-        background: #e8ecf0;
-        border-radius: 25px;
-        .item-now {
-          background: #ffe399;
-          border-radius: 25px 0 0 25px;
+        padding: 0 32px;
+        background: linear-gradient(
+          270deg,
+          #ffbab6 0%,
+          #ffe7d1 29.05%,
+          #f1efff 62%,
+          #c8d6ff 100%
+        );
+        border-radius: 16px;
+
+        .temp-left,
+        .temp-right {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          font-family: "Persagy";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 22px;
+          text-align: right;
+          color: #626c78;
+        }
+        .temp-left {
+          left: 0px;
+          padding-left: 8px;
+        }
+        .temp-right {
+          right: 0px;
+          padding-right: 8px;
         }
 
         .slider-bar {
           position: absolute;
           width: 38px;
-          height: 38px;
-          background: #f6f9fe;
           left: 0;
           bottom: -2px;
           z-index: 333;
-          border-radius: 50%;
-          border: 2px solid #fff;
-          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06),
-            0px 0px 8px rgba(0, 0, 0, 0.1);
+          .bar-temp {
+            padding-bottom: 6px;
+            font-family: "Persagy";
+            font-style: normal;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+            color: #626c78;
+          }
+          .bar-circle {
+            width: 38px;
+            height: 38px;
+            background: #fff;
+            border-radius: 50%;
+            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
+              0px 4px 10px rgba(0, 0, 0, 0.07);
+            border-radius: 21px;
+            z-index: 444;
+          }
         }
       }
-      .temp-slider {
-        background: linear-gradient(
-          90deg,
-          #ffc079 0%,
-          #ffe7d1 43.1%,
-          #f1efff 74.36%,
-          #c8d6ff 100%
-        );
-      }
-    }
-
-    .light-control-padding {
-      padding-top: 35px;
-      padding-bottom: 15px;
     }
   }
 }

+ 46 - 63
src/views/envmonitor/components/FloorHeating/index.vue

@@ -3,12 +3,9 @@
     <!--如果有子设备-->
     <div class="floor-top">
       <div class="top-box">
-        <div
-          class="top-left"
-          v-if="floorHeatingList && floorHeatingList.length > 1"
-        >
+        <div class="top-left">
           <span>地暖</span>
-          <span>{{ realTemp }} <sup>℃</sup></span>
+          <span>{{ realTemp ? realTemp : "--" }} <sup>℃</sup></span>
         </div>
         <div class="top-right">
           <img
@@ -22,7 +19,10 @@
         </div>
       </div>
       <div class="top-switch">
-        <div class="top-nav">
+        <div
+          class="top-nav"
+          v-if="floorHeatingList && floorHeatingList.length > 1"
+        >
           <span
             :class="navType == 'all' ? 'nav-active' : ''"
             @click="checkNav('all')"
@@ -36,6 +36,7 @@
             子设备
           </span>
         </div>
+        <div v-else></div>
         <Switch
           class="switch-btn"
           size="18px"
@@ -65,11 +66,7 @@
     <div class="line" v-if="navType == 'child'"></div>
     <div class="light-box" v-if="navType == 'child'">
       <template v-for="(item, index) in floorHeatingList" :key="item.id">
-        <div
-          class="light-control"
-          @click="showFloorHeating(item)"
-          v-if="loadMore ? index < floorHeatingList.length : index < 2"
-        >
+        <div class="light-control">
           <div class="control-top">
             <div class="control-temp">
               <span>{{ item.tempSet ? item.tempSet : "--" }}<sup>℃</sup></span>
@@ -91,7 +88,7 @@
               {{ item.localName }}
             </div>
             <img
-              @click="showFloorHeating"
+              @click="showFloorHeating(item)"
               :style="{ opacity: item.switch ? '1' : '1' }"
               :src="lightColorImg"
               alt=""
@@ -100,15 +97,6 @@
         </div>
       </template>
     </div>
-
-    <div
-      class="show-all"
-      v-if="floorHeatingList && floorHeatingList.length > 2"
-      @click.stop="showAll"
-    >
-      <van-icon :name="lightIcon" class="light-icon" />
-      <span>展开更多</span>
-    </div>
   </div>
 </template>
   
@@ -213,36 +201,10 @@ export default defineComponent({
       part: 1,
       realTemp: 0,
       navType: "all",
-      showFloorHeating(floorHeatingData: any) {
-        let item: any = {
-          id: "Eq1101080259032a7d37c696489f9cd96186bac1e1ae",
-          name: "设备-D07QP",
-          localName: "调光灯",
-          objType: "equipment",
-          majorCategory: "SE",
-          systemCategory: "SELT",
-          equipmentCategory: "SELTLT",
-          equipQRCode: "Eq1101080259032a7d37c696489f9cd96186bac1e1aeQR",
-          projectId: "Pj1101080259",
-          status: 1,
-          lightType: 4,
-          runStatus: 1,
-          colorTemperature: true,
-          brightMinValue: 1,
-          brightMaxValue: 100,
-          bright: true,
-          colorTempMinValue: 1,
-          colorTempMaxValue: 100,
-          brightValue: 50,
-          colorTempValue: 99,
-          type: "lamp",
-          imgOpen: "/sgipad/images/page-officehome/atmLamp_small_open.png",
-          imgClose: "/sgipad/images/page-officehome/atmLamp_small_close.png",
-          switch: true,
-          loading: false,
-          brightValueRate: 50,
-          colorTempValueRate: 99,
-        };
+      showFloorHeating(floorHeatingItem: any) {
+        let item: any = floorHeatingItem;
+        item.minTempSet = proxyData.floorHeatingData.minTempSet;
+        item.maxTempSet = proxyData.floorHeatingData.maxTempSet;
         contx.emit("showFloorHeating", item);
       },
       getElePading(ele: any, elePadingKey: any) {
@@ -257,6 +219,14 @@ export default defineComponent({
       checkNav(type: any = "all") {
         proxyData.navType = type;
       },
+      getEleWidth(ele: any) {
+        // debugger;
+        if (ele) {
+          return ele.getBoundingClientRect().width;
+        } else {
+          return 1;
+        }
+      },
       // 滑动
       endBoxSwiper() {
         proxyData.swiperIinit = true;
@@ -267,12 +237,16 @@ export default defineComponent({
         let sliderPadingR: any = 24;
         let isMove: any = false;
         let barLeft: any = 0;
-        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
+        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
+        let barWidth: any = proxyData.getEleWidth(barBox);
         if (sliderWidth > 1) {
-          sliderWidth = sliderWidth - sliderPadingR;
+          sliderWidth = sliderWidth - sliderPadingR - sliderPadingL - barWidth;
         }
-        let barWidth: any = barBox ? barBox.offsetWidth : 20;
-        let tempPart = (35 - 16) / (sliderWidth - sliderPadingL - barWidth);
+        let tempPart =
+          (proxyData.floorHeatingData.maxTempSet -
+            proxyData.floorHeatingData.minTempSet) /
+          sliderWidth;
+        console.log("tempPart==", tempPart);
         let part: any = tempPart;
         proxyData.part = part;
         if (!handBox) {
@@ -297,7 +271,10 @@ export default defineComponent({
               let left: any = barLeft - moveRealX;
               left = left < sliderPadingL ? sliderPadingL : left;
               barBox.style.left = left + "px";
-              proxyData.realTemp = left * part;
+              proxyData.realTemp =
+                (left - sliderPadingL) * part +
+                proxyData.floorHeatingData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
             }
           },
           swipeRight: function (e: any) {
@@ -305,9 +282,15 @@ 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;
+              left =
+                left > sliderWidth + sliderPadingR
+                  ? sliderWidth + sliderPadingR
+                  : left;
               barBox.style.left = left + "px";
-              proxyData.realTemp = left * part;
+              proxyData.realTemp =
+                (left - sliderPadingL) * part +
+                proxyData.floorHeatingData.minTempSet;
+              proxyData.realTemp = Math.round(proxyData.realTemp);
             }
           },
         });
@@ -391,10 +374,10 @@ export default defineComponent({
       },
       // 获取灯的状态
       getFloorHeatingList() {
-        // let str: any = setQueryConfig({ spaceId: proxyData.spaceId });
-        let str: any = setQueryConfig({
-          spaceId: "Sp1101080259308f5ed92e964bc1b029038dea962de4",
-        });
+        let str: any = setQueryConfig({ spaceId: proxyData.spaceId });
+        // let str: any = setQueryConfig({
+        //   spaceId: "Sp1101080259308f5ed92e964bc1b029038dea962de4",
+        // });
         querySapceFloorHeating(str)
           .then((res) => {
             const resData: any = res;
@@ -403,11 +386,11 @@ export default defineComponent({
             if (data.equipList && data.equipList.length) {
               proxyData.floorHeatingList = data.equipList;
             }
+            proxyData.startLightsStatusTimer();
             nextTick(() => {
               proxyData.endBoxSwiper();
               proxyData.setBarNowPerstion();
             });
-            proxyData.startLightsStatusTimer();
           })
           .catch(() => {
             proxyData.startLightsStatusTimer();

+ 1 - 1
src/views/envmonitor/index.vue

@@ -349,7 +349,7 @@
     >
       <div>
         <ChildTempSet
-          :lightData="floorData"
+          :floorData="floorData"
           v-if="isFloorHeatingTemp"
         ></ChildTempSet>
       </div>