소스 검색

fix:灯的控制处理

chenzhen2 2 년 전
부모
커밋
8788309773
1개의 변경된 파일423개의 추가작업 그리고 0개의 파일을 삭제
  1. 423 0
      src/views/envmonitor/components/Light/LightTemp.vue

+ 423 - 0
src/views/envmonitor/components/Light/LightTemp.vue

@@ -0,0 +1,423 @@
+<template>
+  <div class="light-temp">
+    <div class="light-tep-top">
+      <span>氛围灯</span>
+      <!-- <Switch
+        v-model="lampSw"
+        inactive-color="rgba(196, 196, 196, 0.4)"
+        class="switch-btn"
+      /> -->
+    </div>
+    <div class="bright-box" v-if="lightData.bright">
+      <div class="bight-text">
+        <span>亮度</span>
+        <span>{{ lightData.brightValueRate }}%</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>
+      </div>
+    </div>
+  </div>
+</template>
+    
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  nextTick,
+} from "vue";
+import { Switch, Dialog, Toast } from "vant";
+import { swiper } from "@/utils/swiper";
+import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
+import { parseImgUrl, setQueryConfig } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  props: {
+    lightData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: { Switch },
+  setup(props, contx) {
+    const propsVal = props;
+    let timeTemp: any = null;
+    let timeColor: any = null;
+    const proxyData = reactive({
+      lampSw: false,
+      itemWidth: "0%",
+      lightData: props.lightData,
+      swiperIinit: false,
+      // 状态控制调整
+      setSpaceContrl(data: any) {
+        setSpaceCondtioners(data).then((res: any) => {});
+      },
+      timeTemp: timeTemp,
+      timeTempNum: 0,
+      timeColor: timeColor,
+      timeColorNum: 0,
+      // 改变当前空间设置的值
+      changContrlVal(type: any) {
+        let data: any = [];
+        if (type == 1) {
+          data = [
+            {
+              id: proxyData.lightData.id,
+              code: "bright",
+              value: proxyData.lightData.brightValue,
+            },
+          ];
+          if(proxyData.timeTempNum==2){
+            proxyData.setSpaceContrl(data);
+          }
+        } else if (type == 2) {
+          data = [
+            {
+              id: proxyData.lightData.id,
+              code: "colorTemperature",
+              value: proxyData.lightData.colorTempValue,
+            },
+          ];
+          if(proxyData.timeColorNum==2){
+            proxyData.setSpaceContrl(data);
+          }
+        }
+      },
+      // 控制结束处理
+      changContrlValEnd(type:any){
+        
+      },
+      // 定时控制
+      setTimeContrl(type: any) {
+        if (type == 1) {
+          clearInterval(proxyData.timeTemp);
+          proxyData.timeTemp = setInterval(() => {
+            if (proxyData.timeTempNum >= 2) {
+              proxyData.timeTempNum = 0;
+            }
+            proxyData.timeTempNum++;
+          }, 1000);
+        } else if (type == 2) {
+          clearInterval(proxyData.timeColor);
+          proxyData.timeColor = setInterval(() => {
+            if (proxyData.timeColorNum >= 2) {
+              proxyData.timeColorNum = 0;
+            }
+            proxyData.timeColorNum++;
+          }, 1000);
+        }
+      },
+      // 设置调节滚动条的最大值和最小值
+      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 bright: any =
+            proxyData.lightData.brightMaxValue / (sliderWidth - barWidth);
+          let rate: any = 100 / proxyData.lightData.brightMaxValue;
+          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 = width + "%";
+        } else if (type == 2) {
+          // 色温
+          let colorVal: any =
+            proxyData.lightData.colorTempMaxValue / (sliderWidth - barWidth);
+          let rate: any = 100 / proxyData.lightData.colorTempMaxValue;
+          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 || 0;
+          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
+          );
+          let width: any =
+            proxyData.lightData.brightValue / rate > 98
+              ? 98
+              : proxyData.lightData.brightValue / rate;
+          proxyData.itemWidth = width + "%";
+        } else if (type == 2) {
+          proxyData.lightData.colorTempValue =
+            proxyData.lightData.colorTempValue || 0;
+          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
+          );
+        }
+        handBox.style.left = left + "px";
+      },
+      //亮度滑块滑动
+      endBoxSwiper() {
+        proxyData.swiperIinit = true;
+        let handBox: any = document.querySelector("#handId1");
+        let sliderBox: any = document.querySelector("#sliderId1");
+        let isMove: any = false;
+        let barLeft: any = 0;
+        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
+        let barWidth: any = handBox ? handBox.offsetWidth : 20;
+        if (!handBox) {
+          return;
+        }
+        proxyData.getDefaultVal(1, sliderWidth, barWidth, handBox);
+
+        handBox.addEventListener("touchstart", function (e: any) {
+          barLeft = isNaN(parseInt(handBox.style.left))
+            ? 0
+            : parseInt(handBox.style.left);
+          isMove = true;
+          proxyData.setTimeContrl(1)
+        });
+        handBox.addEventListener("touchend", function (e: any) {
+          isMove = false;
+          clearInterval(proxyData.timeTemp)
+        });
+
+        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)
+            }
+          },
+          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)
+            }
+          },
+        });
+      },
+      // 色温滑块滑动
+      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;
+        let barWidth: any = handBox ? handBox.offsetWidth : 20;
+        if (!handBox) {
+          return;
+        }
+        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;
+          clearInterval(proxyData.timeColor)
+        });
+
+        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)
+            }
+          },
+        });
+      },
+      // 初始化滑动
+      async barSwiperInit() {
+        nextTick(() => {
+          proxyData.endBoxSwiper();
+          proxyData.tempBoxSwiper();
+        });
+      },
+    });
+
+    watch(props, (newProps: any) => {});
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      proxyData.barSwiperInit();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.light-temp {
+  padding: 10px;
+  .light-tep-top {
+    display: flex;
+    padding-bottom: 60px;
+    line-height: 31px;
+    justify-content: space-between;
+    span {
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 22px;
+
+      color: #000000;
+    }
+  }
+  .bright-box {
+    margin-bottom: 60px;
+    .bight-text {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 15px;
+      span {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: #1b2129;
+      }
+    }
+    .light-control {
+      .bight-slider {
+        position: relative;
+        display: flex;
+        height: 32px;
+        flex: 1;
+        background: #e8ecf0;
+        border-radius: 25px;
+        .item-now {
+          background: #ffe399;
+          border-radius: 25px 0 0 25px;
+        }
+
+        .slider-bar {
+          position: absolute;
+          width: 38px;
+          height: 38px;
+          background: #f6f9fe;
+          left: 0;
+          bottom: -2px;
+          z-index: 333;
+          border-radius: 50%;
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06),
+            0px 0px 8px rgba(0, 0, 0, 0.1);
+        }
+      }
+      .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;
+    }
+  }
+}
+</style>
+