|
@@ -0,0 +1,420 @@
|
|
|
+<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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 定时控制
|
|
|
+ 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>
|
|
|
+
|