Browse Source

fix:窗内需求

chenzhen2 1 năm trước cách đây
mục cha
commit
46c57278da
1 tập tin đã thay đổi với 461 bổ sung0 xóa
  1. 461 0
      src/views/envmonitor/components/Curtain/CurtainOpening.vue

+ 461 - 0
src/views/envmonitor/components/Curtain/CurtainOpening.vue

@@ -0,0 +1,461 @@
+<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>
+