fix:手动控制功能修改

src/styles/index.scss

@@ -185,7 +185,7 @@ div:focus {
 
 
 .switch-btn {
-  width: 48px !important;
+  width: 54px !important;
   height: 24px !important;
 
   .van-switch__node {

src/views/envmonitor/components/Light/LightTemp.vue

@@ -78,23 +78,28 @@ export default defineComponent({
       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
-            }
+      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) {
+      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
+          if (
+            proxyData.lightData.brightValue < proxyData.lightData.brightMinValue
+          ) {
+            proxyData.lightData.brightValue =
+              proxyData.lightData.brightMinValue;
           }
-          proxyData.lightData.brightValue=Math.floor(proxyData.lightData.brightValue)
+          proxyData.lightData.brightValue = Math.floor(
+            proxyData.lightData.brightValue
+          );
           data = [
             {
               id: proxyData.lightData.id,
@@ -102,20 +107,25 @@ export default defineComponent({
               value: proxyData.lightData.brightValue,
             },
           ];
-          if(tmerType==2){
-            
-            if(proxyData.getTimeNum(proxyData.timeTemp)){
-            proxyData.setSpaceContrl(data);
-            proxyData.timeTemp=(new Date()).getTime()
-          }
-          }else {
+          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
+          if (
+            proxyData.lightData.colorTempValue <
+            proxyData.lightData.colorTempMinValue
+          ) {
+            proxyData.lightData.colorTempValue =
+              proxyData.lightData.colorTempMinValue;
           }
-          proxyData.lightData.colorTempValue=Math.floor(proxyData.lightData.colorTempValue)
+          proxyData.lightData.colorTempValue = Math.floor(
+            proxyData.lightData.colorTempValue
+          );
           data = [
             {
               id: proxyData.lightData.id,
@@ -123,31 +133,30 @@ export default defineComponent({
               value: proxyData.lightData.colorTempValue,
             },
           ];
-          if(tmerType==2){
-            if(proxyData.getTimeNum(proxyData.timeColor)){
-            proxyData.setSpaceContrl(data);
-            proxyData.timeColor=(new Date()).getTime()
-          }
-          }else {
+          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)
+      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()
+          proxyData.timeTemp = new Date().getTime();
         } else if (type == 2) {
-          proxyData.timeColor=new Date().getTime()
+          proxyData.timeColor = new Date().getTime();
         }
       },
       // 设置调节滚动条的最大值和最小值
@@ -165,26 +174,28 @@ export default defineComponent({
         proxyData.setLightDataMax();
         if (type == 1) {
           //  亮度
-          let value:any=proxyData.lightData.brightMaxValue -proxyData.lightData.brightMinValue 
-          let bright: any =
-          value / (sliderWidth - barWidth);
+          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
+            proxyData.lightData.brightValueRate >= 98
               ? 98
               : proxyData.lightData.brightValueRate;
           proxyData.lightData.brightValue =
             proxyData.lightData.brightValueRate * rate;
-          proxyData.itemWidth = width + "%";
+          proxyData.itemWidth = left + barWidth / 2 + "px";
         } else if (type == 2) {
-          let value:any=proxyData.lightData.colorTempMaxValue -proxyData.lightData.colorTempMinValue 
+          let value: any =
+            proxyData.lightData.colorTempMaxValue -
+            proxyData.lightData.colorTempMinValue;
           // 色温
-          let colorVal: any =
-          value / (sliderWidth - barWidth);
+          let colorVal: any = value / (sliderWidth - barWidth);
           let rate: any = 100 / value;
           proxyData.lightData.colorTempValueRate = left * colorVal * rate;
           proxyData.lightData.colorTempValueRate = Math.floor(
@@ -200,7 +211,10 @@ export default defineComponent({
         let left: any = "";
         if (type == 1) {
           proxyData.lightData.brightValue =
-            proxyData.lightData.brightValue || 0;
+            proxyData.lightData.brightValue <=
+            proxyData.lightData.brightMinValue
+              ? 0
+              : proxyData.lightData.brightValue;
           if (
             proxyData.lightData.brightValue > proxyData.lightData.brightMaxValue
           ) {
@@ -215,14 +229,13 @@ export default defineComponent({
           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 + "%";
+          proxyData.itemWidth = left + barWidth / 2 + "px";
         } else if (type == 2) {
           proxyData.lightData.colorTempValue =
-            proxyData.lightData.colorTempValue || 0;
+            proxyData.lightData.colorTempValue <=
+            proxyData.lightData.colorTempMinValue
+              ? 0
+              : proxyData.lightData.colorTempValue;
           if (
             proxyData.lightData.colorTempValue >
             proxyData.lightData.colorTempMaxValue
@@ -248,10 +261,11 @@ export default defineComponent({
         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;
         }
+        let barWidth: any = handBox.getBoundingClientRect().width;
         proxyData.getDefaultVal(1, sliderWidth, barWidth, handBox);
 
         handBox.addEventListener("touchstart", function (e: any) {
@@ -259,11 +273,11 @@ export default defineComponent({
             ? 0
             : parseInt(handBox.style.left);
           isMove = true;
-          proxyData.setTimeContrl(1)
+          proxyData.setTimeContrl(1);
         });
         handBox.addEventListener("touchend", function (e: any) {
           isMove = false;
-         proxyData.changContrlValEnd(1)
+          proxyData.changContrlValEnd(1);
         });
 
         swiper(handBox, {
@@ -276,7 +290,7 @@ export default defineComponent({
               // debugger
               handBox.style.left = left + "px";
               proxyData.setBarValue(1, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(1)
+              proxyData.changContrlVal(1);
             }
           },
           swipeRight: function (e: any) {
@@ -289,7 +303,7 @@ export default defineComponent({
                 left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
               handBox.style.left = left + "px";
               proxyData.setBarValue(1, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(1)
+              proxyData.changContrlVal(1);
             }
           },
         });
@@ -302,21 +316,21 @@ export default defineComponent({
         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;
         }
+        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)
+          proxyData.setTimeContrl(2);
         });
         handBox.addEventListener("touchend", function (e: any) {
           isMove = false;
-          proxyData.changContrlValEnd(2)
+          proxyData.changContrlValEnd(2);
         });
 
         swiper(handBox, {
@@ -329,7 +343,7 @@ export default defineComponent({
               // debugger
               handBox.style.left = left + "px";
               proxyData.setBarValue(2, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(2)
+              proxyData.changContrlVal(2);
             }
           },
           swipeRight: function (e: any) {
@@ -342,7 +356,7 @@ export default defineComponent({
                 left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
               handBox.style.left = left + "px";
               proxyData.setBarValue(2, sliderWidth, left, barWidth);
-              proxyData.changContrlVal(2)
+              proxyData.changContrlVal(2);
             }
           },
         });
@@ -421,6 +435,7 @@ export default defineComponent({
           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);
         }

src/views/envmonitor/components/Light/index.vue

@@ -24,13 +24,17 @@
     </div>
 
     <div class="light-main-control" v-if="!isShowChildLight">
-      <div class="main-color">
+      <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"
@@ -45,11 +49,11 @@
       <template v-for="(item, index) in lampList" :key="item.id">
         <div
           class="light-control"
-          @click="showLightColorCtrol(item, $event)"
-          v-if="(!showFlag && index < 2) || showFlag"
+          @click="showLightColorCtrol(item)"
+          v-if="showFlag ? index < lampList.length : index < 2"
         >
           <div class="control-top">
-            <img :src="item.lightImg" alt="" />
+            <img :src="item.switch ? item.imgOpen : item.imgClose" alt="" />
             <Switch
               active-color="$elActiveColor"
               :disabled="!userIsControl"
@@ -81,7 +85,7 @@
       @click.stop="showAll"
     >
       <van-icon :name="lightIcon" class="light-icon" />
-      <span @click="showAll">展开更多</span>
+      <span>展开更多</span>
     </div>
   </div>
 </template>
@@ -102,6 +106,7 @@ import {
 import { Switch, Toast } from "vant";
 import { getLampHttp, getStatusHttp, setallLampHttp } from "@/apis/envmonitor";
 import { parseImgUrl } from "@/utils";
+import { type } from "os";
 
 export default defineComponent({
   props: {
@@ -140,6 +145,7 @@ export default defineComponent({
     let lightParams: any = [];
     const proxyData = reactive({
       seviceEquipmentList: props.seviceEquipmentList,
+      spaceId: props.spaceId,
       controlMode: props.controlMode,
       userIsControl: props.userIsControl,
       forceOverTimeFlag: props.forceOverTimeFlag,
@@ -160,11 +166,16 @@ export default defineComponent({
       // 点击展示所有的登录
       showAll() {
         proxyData.showFlag = !proxyData.showFlag;
-        proxyData.lightIcon = "arrow-down";
+        console.log("proxyData.showFlag==", proxyData.showFlag);
+        if (proxyData.showFlag) {
+          proxyData.lightIcon = "arrow-up";
+        } else {
+          proxyData.lightIcon = "arrow-down";
+        }
       },
       // 点击展示调色和调温弹窗
       showLightColorCtrol(item: any, e: any = null) {
-        console.log(e.target)
+        console.log(item);
         if (item.switch) {
           contx.emit("showLightColorCtrol", item);
         }
@@ -194,7 +205,7 @@ export default defineComponent({
       },
       // 获取灯的状态
       getLampList() {
-        getLampHttp({ spaceId: props.spaceId })
+        getLampHttp({ spaceId: proxyData.spaceId })
           .then((res) => {
             const resData: any = res;
             if (!proxyData.setStatus) {
@@ -205,14 +216,13 @@ export default defineComponent({
                   content[i].type = "lamp";
                   content[i].imgOpen = parseImgUrl(
                     "page-officehome",
-                    "lampch_open.png"
+                    "lamp_open.png"
                   );
                   content[i].imgClose = parseImgUrl(
                     "page-officehome",
-                    "lampch_close.png"
+                    "lamp_close.png"
                   );
                   content[i].switch = content[i].runStatus ? true : false;
-                  content[i].lightImg=content[i].runStatus ? parseImgUrl("page-officehome", "lamp_open.png") : parseImgUrl("page-officehome", "lamp_close.png");
                   if (content[i].runStatus) {
                     lampOpen = true;
                   }
@@ -242,7 +252,7 @@ export default defineComponent({
               proxyData.lampList
             );
             if (item !== "") {
-              proxyData.lampSw = item;
+              proxyData.lampSw = item; // 点击全开和全关的时候item动态传值true或者false
             }
 
             if (
@@ -259,6 +269,9 @@ export default defineComponent({
             proxyData.loadingLight = true;
             // const statusFlag = !proxyData.lampSw
             // console.log('proxyData.lampSw==')
+            proxyData.lightImg = proxyData.lampSw
+              ? parseImgUrl("page-officehome", "lamp_open.png")
+              : parseImgUrl("page-officehome", "lamp_close.png");
             const statusFlag = proxyData.lampSw;
             // 瞬间修改状态
             proxyData.setStatus = true;
@@ -499,6 +512,8 @@ export default defineComponent({
         proxyData.seviceEquipmentList = newProps.seviceEquipmentList;
         if (newProps.spaceId) {
           // 空间id改变的重新获取值调用接口
+          proxyData.spaceId = newProps.spaceId;
+          proxyData.showFlag=false
           proxyData.clearLightStatusTimer();
           proxyData.getLampList();
           console.log("调用了====");
@@ -546,8 +561,13 @@ export default defineComponent({
   padding-bottom: 15px;
   padding-left: 20px;
   padding-right: 15px;
+  // line-height: 36px;
   display: flex;
   justify-content: space-between;
+  text-align: right;
+  div {
+    width: 36px;
+  }
   .main-color {
     width: 36px;
     height: 36px;
@@ -561,6 +581,10 @@ export default defineComponent({
       margin-top: 8px;
     }
   }
+  .switch-btn {
+    margin-top: 6px;
+    margin-right: 12px;
+  }
 }
 
 .light-desc {
@@ -593,6 +617,14 @@ export default defineComponent({
       background: #f1f4f6;
       border-radius: 21px;
     }
+    .switch-item {
+      &:hover {
+        background: #e8ecf0;
+      }
+      &:active {
+        background: #e8ecf0;
+      }
+    }
   }
 
   img {