sagacloud-sagacare-ipad/src/views/envmonitor/components/Light/LightTemp.vue

<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: 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;
        } 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
          );
        }
        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;

        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))
            ? 0
            : parseInt(handBox.style.left);
          isMove = true;
          proxyData.setTimeContrl(1);
        });
        handBox.addEventListener("touchend", function (e: any) {
          isMove = false;
          proxyData.changContrlValEnd(1);
        });

        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;
        if (!handBox) {
          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);
            }
          },
        });
      },
      // 初始化滑动
      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%;
          border: 2px solid #fff;
          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>