fix:子设备的开度调整

src/views/envmonitor/components/Curtain/CurtainOpening.vue

@@ -7,7 +7,7 @@
       <div class="bight-text">
         <span>开度</span>
         <span class="line"></span>
-        <span>20%</span>
+        <span>{{ apertureVal }}%</span>
       </div>
       <div class="curtain-control">
         <div class="bight-slider" id="curtainSlider1">
@@ -89,6 +89,7 @@ export default defineComponent({
     const proxyData = reactive({
       lampSw: false,
       itemWidth: "0%",
+      apertureVal: 0,
       parseImgUrl: parseImgUrl,
       curtainObj: curtainObj,
       curtainData: props.curtainData,
@@ -113,6 +114,7 @@ export default defineComponent({
         });
         handBox.addEventListener("touchend", function (e: any) {
           isMove = false;
+          proxyData.formateCurtainData(4);
         });
 
         swiper(handBox, {
@@ -125,6 +127,8 @@ export default defineComponent({
               // debugger
               handBox.style.left = left + "px";
               proxyData.itemWidth = left + barWidth / 2 + "px";
+              proxyData.apertureVal = (left / (sliderWidth - barWidth)) * 100;
+              proxyData.apertureVal = Math.floor(proxyData.apertureVal);
             }
           },
           swipeRight: function (e: any) {
@@ -137,11 +141,43 @@ export default defineComponent({
                 left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
               handBox.style.left = left + "px";
               proxyData.itemWidth = left + barWidth / 2 + "px";
+              proxyData.apertureVal = (left / (sliderWidth - barWidth)) * 100;
+              proxyData.apertureVal = Math.floor(proxyData.apertureVal);
             }
           },
         });
       },
-
+      // 处理窗帘数据
+      formateCurtainData(type: any) {
+        let data: any = [];
+        let value: any = 0;
+        if (type == 1) {
+          // 关
+          value = 0;
+        } else if (type == 2) {
+          // 开
+          value = 1;
+        } else if (type == 3) {
+          // 暂停
+          value = 2;
+        } else {
+          // 开度
+          value = proxyData.apertureVal;
+        }
+        proxyData.curtainData.map((item: any) => {
+          let obj: any = {
+            id: item.id,
+            code: type == 4 ? "EquipOpeningSet" : "EquipSwitchSet",
+            value: value,
+          };
+          data.push(obj);
+        });
+        proxyData.changeCurtainStatus(data);
+      },
+      changeCurtainStatus(data: any) {
+        // console.log("窗帘==", data);
+        setSpaceCondtioners(data).then((res) => {});
+      },
       // 初始化滑动
       async barSwiperInit() {
         nextTick(() => {

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

@@ -99,6 +99,7 @@
         <!--右开-->
         <div
           class="control-item"
+          @click="openCurtainMain(2)"
           :class="allActive == 2 ? 'control-item-active' : ''"
         >
           <template v-if="allActive !== 2">
@@ -107,7 +108,6 @@
                 curtainData[0].equipmentType !== 4 &&
                 curtainData[0].equipmentType !== 5
               "
-              @click="openCurtainMain(2)"
               :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
               alt=""
             />
@@ -126,31 +126,47 @@
       <div class="child-item" :key="item.id" v-for="item in curtainData">
         <div class="curtain-name">
           <div class="name">{{ item.name }}</div>
-          <span>开度90%</span>
+          <span>开度{{ item.openValue }}%</span>
         </div>
         <div class="curtain-control top-control">
-          <div class="control-item" v-if="item.isOpenSet">
+          <div
+            class="control-item"
+            @click="openCurtainOpening([item])"
+            v-if="item.isOpenSet"
+          >
             <img
               :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
               alt=""
             />
           </div>
           <!--左边-->
-          <div class="control-item">
-            <img
-              v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
-              :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
-              alt=""
-            />
-            <img
-              v-else
-              :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
-              alt=""
-            />
+          <div
+            class="control-item"
+            @click="openCurtainClid(item, 1)"
+            :class="item.activeIndex == 1 ? 'control-item-active' : ''"
+          >
+            <template v-if="item.activeIndex != 1">
+              <img
+                v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
+                :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
+                alt=""
+              />
+              <img
+                v-else
+                :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
+                alt=""
+              />
+            </template>
+            <span v-else>{{ item.count }}</span>
           </div>
 
           <!--暂停-->
-          <div class="control-item" v-if="item.stopSet">
+          <div
+            class="control-item"
+            @click="openCurtainClid(item, 3)"
+            :class="item.activeIndex == 3 ? 'control-item-active' : ''"
+            v-if="item.stopSet"
+          >
             <img
               :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
               alt=""
@@ -159,17 +175,24 @@
 
           <!-- {{ item }} -->
           <!--右边-->
-          <div class="control-item">
-            <img
-              v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
-              :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
-              alt=""
-            />
-            <img
-              v-else
-              :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
-              alt=""
-            />
+          <div
+            class="control-item"
+            @click="openCurtainClid(item, 2)"
+            :class="item.activeIndex == 2 ? 'control-item-active' : ''"
+          >
+            <template v-if="item.activeIndex != 2">
+              <img
+                v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
+                :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
+                alt=""
+              />
+              <img
+                v-else
+                :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
+                alt=""
+              />
+            </template>
+            <span v-else>{{ item.count }}</span>
           </div>
         </div>
       </div>
@@ -181,6 +204,7 @@
 import {
   computed,
   defineComponent,
+  onBeforeUnmount,
   onMounted,
   reactive,
   toRefs,
@@ -229,6 +253,7 @@ export default defineComponent({
       timer: timer,
       // 开度弹窗
       allActive: 0,
+      // 打开开度弹窗
       openCurtainOpening(selectData: any) {
         contx.emit("showCurtainOpening", selectData);
       },
@@ -255,17 +280,15 @@ export default defineComponent({
         getObjectDataEqpGroupHttp(params).then((res) => {
           const resData: any = res;
           proxyData.curtainData = resData.count ? resData.content : [];
+          // 初始化状态数据
+          proxyData.curtainData.map((item: any) => {
+            item.count = 0;
+            item.activeIndex = 0;
+          });
         });
       },
-      checkCount() {
-        if (proxyData.count > 0) {
-          return true;
-        } else {
-          return false;
-        }
-      },
-      interval: interval,
       // 定时器定时计算
+      interval: interval,
       countInterval() {
         proxyData.interval = setInterval(() => {
           proxyData.count--;
@@ -276,7 +299,19 @@ export default defineComponent({
           }
         }, 1000);
       },
-      // 调节总开关
+      countChildInterval(item: any) {
+        // debugger
+        proxyData.interval = setInterval(() => {
+          item.count--;
+          if (item.count == 0) {
+            item.count = 2;
+            item.activeIndex = 0;
+            clearInterval(proxyData.interval);
+          }
+          // console.log(item.count)
+        }, 1000);
+      },
+      // 窗帘总开关
       openCurtainMain(type: any) {
         // type=1(关) type=2(开) type=3(暂停)
         if (proxyData.allActive == type && proxyData.count !== 0) {
@@ -287,9 +322,7 @@ export default defineComponent({
         proxyData.countInterval();
         proxyData.formateCurtainData(type);
       },
-      // 处理窗帘数据
-      formateCurtainData(type: any) {
-        let data: any = [];
+      formateValue(type: any) {
         let value: any = 0;
         if (type == 1) {
           value = 0;
@@ -298,6 +331,12 @@ export default defineComponent({
         } else {
           value = 2;
         }
+        return value;
+      },
+      // 处理窗帘数据
+      formateCurtainData(type: any) {
+        let data: any = [];
+        let value: any = proxyData.formateValue(type);
         proxyData.curtainData.map((item: any) => {
           let obj: any = {
             id: item.id,
@@ -313,6 +352,23 @@ export default defineComponent({
         console.log("窗帘==", data);
         setSpaceCondtioners(data).then((res) => {});
       },
+      // 单个窗帘操作
+      openCurtainClid(item: any, type: any) {
+        if (item.activeIndex == type && item.count !== 0) {
+          return;
+        }
+        item.activeIndex = type;
+        let data: any = [];
+        let obj: any = {
+          id: item.id,
+          code: "EquipSwitchSet",
+          value: proxyData.formateValue(type),
+        };
+        data.push(obj);
+        item.count = 2;
+        proxyData.countChildInterval(item);
+        proxyData.changeCurtainStatus(data);
+      },
     });
 
     watch(props, (newProps: any) => {
@@ -322,6 +378,7 @@ export default defineComponent({
         proxyData.userIsControl = newProps.userIsControl;
       }
     });
+    onBeforeUnmount(() => {});
     onMounted(() => {
       // 获取窗帘信息
       proxyData.getEqpGroup();
@@ -428,8 +485,8 @@ export default defineComponent({
     }
     img {
       position: absolute;
-      width: 16px;
-      height: 16px;
+      // width: 16px;
+      // height: 16px;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
@@ -461,12 +518,15 @@ export default defineComponent({
     padding-right: 20px;
     border-top: 1px solid #e8ecf0;
     .curtain-name {
+      display: inline-block;
+      vertical-align: middle;
       .name {
         font-family: "PingFang SC";
         font-style: normal;
         font-weight: 600;
         font-size: 16px;
         line-height: 22px;
+        padding-top: 5px;
         color: #4d5262;
       }
       span {
@@ -482,7 +542,10 @@ export default defineComponent({
     }
   }
   .top-control {
+    display: inline-block;
+    vertical-align: middle;
     padding: 0;
+    // padding-top: 5px;
   }
 }
 </style>

vue.config.js

@@ -116,7 +116,7 @@ module.exports = {
       },
       '/sgipad/test/': {
         // target: 'https://duoduoenv.sagacloud.cn',
-        target: 'http://192.168.88.4:52009',    // 永琪
+        target: 'http://192.168.88.6:52009',    // 永琪
         // target: 'http://192.168.4.54:52009', // 小静
         // target: 'http://192.168.16.168:52015',
         changeOrigin: true,