Selaa lähdekoodia

fix:窗帘开度设置

chenzhen2 1 vuosi sitten
vanhempi
commit
07ba51e7d6

+ 173 - 434
src/views/envmonitor/components/Curtain/CurtainOpening.vue

@@ -1,461 +1,200 @@
 <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 class="curtain-temp">
+    <div class="curtain-tep-top">
+      <span>氛围灯</span>
+    </div>
+    <div class="bright-box">
+      <div class="bight-text">
+        <span>亮度</span>
+        <span>20%</span>
       </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 class="curtain-control">
+        <div class="bight-slider" id="curtainSlider1">
+          <div class="item-now" :style="{ width: itemWidth }"></div>
+          <div class="slider-bar" id="curtainHandld1"></div>
         </div>
       </div>
     </div>
-  </template>
+  </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: () => {},
-      },
+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: {
+    curtainData: {
+      type: Array,
+      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;
+  },
+  components: { Switch },
+  setup(props, contx) {
+    const propsVal = props;
+    let timeTemp: any = null;
+    let timeColor: any = null;
+    const proxyData = reactive({
+      lampSw: false,
+      itemWidth: "0%",
+      curtainData: props.curtainData,
+      //亮度滑块滑动
+      endBoxSwiper() {
+        let handBox: any = document.querySelector("#curtainHandld1");
+        let sliderBox: any = document.querySelector("#curtainSlider1");
+        let isMove: any = false;
+        let barLeft: any = 0;
+        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
+
+        if (!handBox) {
+          return;
+        }
+        let barWidth: any = handBox.getBoundingClientRect().width;
+
+        handBox.addEventListener("touchstart", function (e: any) {
+          barLeft = isNaN(parseInt(handBox.style.left))
+            ? 0
+            : parseInt(handBox.style.left);
+          isMove = true;
+        });
+        handBox.addEventListener("touchend", function (e: any) {
+          isMove = false;
+        });
+
+        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";
             }
-            let bright: any =
-              proxyData.lightData.brightMaxValue / (sliderWidth - barWidth);
-            let rate: any = 100 / proxyData.lightData.brightMaxValue;
+          },
+          swipeRight: function (e: any) {
             // 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;
+            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";
             }
-            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>
+          },
+        });
+      },
+
+      // 初始化滑动
+      async barSwiperInit() {
+        nextTick(() => {
+          proxyData.endBoxSwiper();
+        });
+      },
+    });
+
+    watch(props, (newProps: any) => {});
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      proxyData.barSwiperInit();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
   <style lang="scss" scoped>
-  .light-temp {
-    padding: 10px;
-    .light-tep-top {
+.curtain-temp {
+  padding: 10px;
+  .curtain-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;
-      padding-bottom: 60px;
-      line-height: 31px;
       justify-content: space-between;
+      padding-bottom: 15px;
       span {
         font-family: "PingFang SC";
         font-style: normal;
-        font-weight: 500;
-        font-size: 22px;
-  
-        color: #000000;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: #1b2129;
       }
     }
-    .bright-box {
-      margin-bottom: 60px;
-      .bight-text {
+    .curtain-control {
+      .bight-slider {
+        position: relative;
         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);
-          }
+        height: 32px;
+        flex: 1;
+        background: #e8ecf0;
+        border-radius: 25px;
+        .item-now {
+          background: #ffe399;
+          border-radius: 25px 0 0 25px;
         }
-        .temp-slider {
-          background: linear-gradient(
-            90deg,
-            #ffc079 0%,
-            #ffe7d1 43.1%,
-            #f1efff 74.36%,
-            #c8d6ff 100%
-          );
+
+        .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);
         }
       }
-  
-      .light-control-padding {
-        padding-top: 35px;
-        padding-bottom: 15px;
+      .temp-slider {
+        background: linear-gradient(
+          90deg,
+          #ffc079 0%,
+          #ffe7d1 43.1%,
+          #f1efff 74.36%,
+          #c8d6ff 100%
+        );
       }
     }
+
+    .curtain-control-padding {
+      padding-top: 35px;
+      padding-bottom: 15px;
+    }
   }
-  </style>
+}
+</style>
       

+ 6 - 1
src/views/envmonitor/components/Curtain/index.vue

@@ -47,6 +47,7 @@
       <div class="top-control">
         <img
           :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
+          @click="openCurtainOpening()"
           alt=""
         />
 
@@ -156,7 +157,7 @@ export default defineComponent({
       default: () => false,
     },
   },
-  setup(props) {
+  setup(props, contx) {
     let curtainData: any = [];
     let timer: any = null;
     let projectId: any = props.projectId;
@@ -173,6 +174,10 @@ export default defineComponent({
       curtainClose: false,
       parseImgUrl: parseImgUrl,
       timer: timer,
+      // 开度弹窗
+      openCurtainOpening(selectData: any) {
+        contx.emit("showCurtainOpening", selectData);
+      },
       // 导航切换
       checkNav(type: any) {
         proxyData.type = type;

+ 25 - 0
src/views/envmonitor/index.vue

@@ -240,6 +240,7 @@
         :spaceId="spaceInfo.spaceId"
         id="curtainId"
         key="curtainKey"
+        @showCurtainOpening="showCurtainOpening"
         :userIsControl="userIsControl"
         v-if="spaceExistenceDevice.curtain && spaceInfo.spaceId"
         :projectId="projectId"
@@ -352,6 +353,19 @@
         ></ChildTempSet>
       </div>
     </van-popup>
+
+    <!--窗帘开度设置-->
+    <van-popup
+      v-model:show="isCurtainOpening"
+      position="right"
+      :close-on-click-overlay="true"
+      class="popup-content"
+      teleport="#app"
+    >
+      <div>
+        <curtain-opening :curtainData="curtainData"></curtain-opening>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -381,6 +395,7 @@ import FloorHeating from "@/views/envmonitor/components/FloorHeating/index.vue";
 import ManualIndex from "@/views/envmonitor/components/Air/manualIndex.vue";
 import Light from "@/views/envmonitor/components/Light/index.vue";
 import Curtain from "@/views/envmonitor/components/Curtain/index.vue";
+import CurtainOpening from "@/views/envmonitor/components/Curtain/CurtainOpening.vue";
 import TimeBox from "@/views/envmonitor/TimeBox.vue";
 import NavBar from "@/views/envmonitor/NavBar.vue";
 import ScenarioDailog from "@/views/envmonitor/components/Scenario/scenarioDailog.vue";
@@ -449,6 +464,7 @@ export default defineComponent({
     Detail,
     Contact,
     ChildTempSet,
+    CurtainOpening,
     [Dialog.Component.name]: Dialog.Component,
     VanPopup: Popup,
     VanIcon: Icon,
@@ -470,6 +486,7 @@ export default defineComponent({
     const outWeather: any = {};
     const weatherTimer: any = null;
     const equimentsTimer: any = null;
+    let curtainData: any = [];
     let secenaroStatus: any = {};
     // 空间数据(包括空间下的设备的状态)
     const officeData: any = {};
@@ -863,6 +880,14 @@ export default defineComponent({
         proxyData.isLightColorFlag = true;
         proxyData.lightData = lightData;
       },
+      curtainData: curtainData,
+      isCurtainOpening: false, // 窗帘开度
+      // 展示开度调节按钮
+      showCurtainOpening(curtainData: any) {
+        // 是否展示窗帘
+        proxyData.curtainData = curtainData;
+        proxyData.isCurtainOpening = true;
+      },
       closeContactDailog() {
         proxyData.isShowContact = false;
       },