Procházet zdrojové kódy

fix:地暖功能修改

chenzhen2 před 1 rokem
rodič
revize
f0d6061c3c

+ 461 - 0
src/views/envmonitor/components/FloorHeating/ChildTempSet.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>
+      

+ 28 - 28
src/views/envmonitor/components/FloorHeating/index.vue

@@ -13,8 +13,18 @@
       </div>
       <div class="top-switch">
         <div class="top-nav">
-          <span class="nav-active"> 总控制 </span>
-          <span> 子设备 </span>
+          <span
+            :class="navType == 'all' ? 'nav-active' : ''"
+            @click="checkNav('all')"
+          >
+            总控制
+          </span>
+          <span
+            :class="navType == 'child' ? 'nav-active' : ''"
+            @click="checkNav('child')"
+          >
+            子设备
+          </span>
         </div>
         <Switch
           class="switch-btn"
@@ -24,7 +34,7 @@
       </div>
     </div>
 
-    <div class="air-control air-control-padding">
+    <div class="air-control air-control-padding" v-if="navType == 'all'">
       <div class="control-box">
         <div class="temp-slider" id="slideFloorId">
           <div class="slider-bar" id="barFloorId">
@@ -37,29 +47,9 @@
       </div>
     </div>
 
-    <div class="light-main-control" v-if="!isShowChildLight">
-      <div
-        class="main-color"
-        v-if="lampList[0].bright || lampList[0].colorTemperature"
-      >
-        <img
-          :src="lightColorImg"
-          @click="showLightColorCtrol(lampList[0])"
-          alt=""
-        />
-      </div>
-      <div v-else></div>
-      <Switch
-        v-if="!showFlag"
-        :disabled="!userIsControl"
-        v-model="lampSw"
-        @click="eqChange('allLamp', '', 0)"
-        inactive-color="rgba(196, 196, 196, 0.4)"
-        class="switch-btn"
-      />
-    </div>
     <!--灯控制按钮-->
-    <div class="light-box" v-if="isShowChildLight">
+    <div class="line" v-if="navType == 'child'"></div>
+    <div class="light-box" v-if="navType == 'child'">
       <template v-for="(item, index) in lampList" :key="item.id">
         <div
           class="light-control"
@@ -200,6 +190,7 @@ export default defineComponent({
       swiperIinit: false,
       part: 1,
       realTemp: 0,
+      navType: "all",
       getElePading(ele: any, elePadingKey: any) {
         let style: any = getComputedStyle(ele, null);
         if (style) {
@@ -208,6 +199,10 @@ export default defineComponent({
           return 0;
         }
       },
+      // 子设备导航切换
+      checkNav(type: any = "all") {
+        proxyData.navType = type;
+      },
       // 滑动
       endBoxSwiper() {
         proxyData.swiperIinit = true;
@@ -947,7 +942,7 @@ export default defineComponent({
       bottom: -2px;
       z-index: 333;
       .bar-temp {
-        padding-bottom: 10px;
+        padding-bottom: 6px;
         font-family: "Persagy";
         font-style: normal;
         font-weight: 400;
@@ -978,8 +973,8 @@ export default defineComponent({
 }
 
 .air-control-padding {
-  padding-top: 35px;
-  padding-bottom: 15px;
+  padding: 30px 20px;
+  // padding-top: 40px;
 }
 
 .line {
@@ -1108,6 +1103,11 @@ export default defineComponent({
   }
 }
 
+.line {
+  border-top: 1px solid #e8ecf0;
+  margin-top: 4px;
+  margin-bottom: 16px;
+}
 .light-box {
   padding: 0 16px;
   font-size: 0;

+ 23 - 1
src/views/envmonitor/index.vue

@@ -214,7 +214,7 @@
         :controlMode="controlMode"
         :seviceEquipmentList="seviceEquipmentList"
         @triggerWork="triggerWork"
-        @showLightColorCtrol="showLightColorCtrol"
+        @showFloorHeating="showFloorHeating"
         id="floorHeatingId"
         key="floorHeatingKey"
         :userIsControl="userIsControl"
@@ -338,6 +338,22 @@
         <light-temp :lightData="lightData" v-if="isLightColorFlag"></light-temp>
       </div>
     </van-popup>
+
+    <!--地暖调光和调色温-->
+    <van-popup
+      v-model:show="isFloorHeatingTemp"
+      position="right"
+      :close-on-click-overlay="true"
+      class="popup-content"
+      teleport="#app"
+    >
+      <div>
+        <ChildTempSet
+          :lightData="lightData"
+          v-if="isFloorHeatingTemp"
+        ></ChildTempSet>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -373,6 +389,7 @@ import ScenarioDailog from "@/views/envmonitor/components/Scenario/scenarioDailo
 import Detail from "@/views/envmonitor/detail.vue";
 import ComMap from "@/views/envmonitor/components/Map/index.vue";
 import LightTemp from "@/views/envmonitor/components/Light/LightTemp.vue";
+import ChildTempSet from "@/views/envmonitor/components/FloorHeating/ChildTempSet.vue";
 import { Icon, Popup, Dialog, Toast } from "vant";
 import { useRouter, useRoute } from "vue-router";
 import {
@@ -433,6 +450,7 @@ export default defineComponent({
     ScenarioConfig,
     Detail,
     Contact,
+    ChildTempSet,
     [Dialog.Component.name]: Dialog.Component,
     VanPopup: Popup,
     VanIcon: Icon,
@@ -833,6 +851,10 @@ export default defineComponent({
       showContact() {
         proxyData.isShowContact = true;
       },
+      isFloorHeatingTemp: false,
+      showFloorHeating() {
+        proxyData.isFloorHeatingTemp = true;
+      },
       isLightColorFlag: false,
       lightData: lightData,
       //  展示调光,调温弹窗