Browse Source

fix:窗帘开度调节

chenzhen2 1 year ago
parent
commit
dd5cad7f1c

+ 111 - 25
src/views/envmonitor/components/Curtain/CurtainOpening.vue

@@ -19,37 +19,63 @@
 
     <div class="curtain-control top-control">
       <!--左边-->
-      <div class="control-item">
-        <img
-          v-if="curtainObj.equipmentType == 4 || curtainObj.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"
+        :class="activeIndex == 1 ? 'control-item-active' : ''"
+        @click="openCurtainMain(1)"
+      >
+        <template v-if="activeIndex != 1">
+          <img
+            v-if="
+              curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5
+            "
+            :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
+            alt=""
+          />
+          <img
+            v-else
+            :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
+            alt=""
+          />
+        </template>
+
+        <span class="count-num" v-else>{{ count }}</span>
+        <span class="title">关闭</span>
       </div>
 
       <!--暂停-->
-      <div class="control-item">
+      <div
+        class="control-item"
+        @click="openCurtainMain(3)"
+        :class="activeIndex == 3 ? 'control-item-active' : ''"
+      >
         <img :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
+        <span class="title">暂停</span>
       </div>
 
       <!-- {{ item }} -->
       <!--右边-->
-      <div class="control-item">
-        <img
-          v-if="curtainObj.equipmentType == 4 || curtainObj.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="openCurtainMain(2)"
+        :class="activeIndex == 2 ? 'control-item-active' : ''"
+      >
+        <template v-if="activeIndex != 2">
+          <img
+            v-if="
+              curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5
+            "
+            :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
+            alt=""
+          />
+          <img
+            v-else
+            :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
+            alt=""
+          />
+        </template>
+        <span  class="count-num" v-else>{{ count }}</span>
+        <span class="title">打开</span>
       </div>
     </div>
   </div>
@@ -86,10 +112,13 @@ export default defineComponent({
     const propsVal = props;
     let timeTemp: any = null;
     let curtainObj: any = {};
+    let interval: any = {};
     const proxyData = reactive({
       lampSw: false,
       itemWidth: "0%",
       apertureVal: 0,
+      activeIndex: 0,
+      count: 2, // 到记时
       parseImgUrl: parseImgUrl,
       curtainObj: curtainObj,
       curtainData: props.curtainData,
@@ -147,6 +176,40 @@ export default defineComponent({
           },
         });
       },
+      // 定时器定时计算
+      interval: interval,
+      countInterval() {
+        proxyData.interval = setInterval(() => {
+          proxyData.count--;
+          if (proxyData.count == 0) {
+            proxyData.count = 2;
+            proxyData.activeIndex = 0;
+            clearInterval(proxyData.interval);
+          }
+        }, 1000);
+      },
+      // 窗帘总开关
+      openCurtainMain(type: any) {
+        // type=1(关) type=2(开) type=3(暂停)
+        if (proxyData.activeIndex == type && proxyData.count !== 0) {
+          return;
+        }
+        proxyData.activeIndex = type;
+        proxyData.count = 2;
+        proxyData.countInterval();
+        proxyData.formateCurtainData(type);
+      },
+      formateValue(type: any) {
+        let value: any = 0;
+        if (type == 1) {
+          value = 0;
+        } else if (type == 2) {
+          value = 1;
+        } else {
+          value = 2;
+        }
+        return value;
+      },
       // 处理窗帘数据
       formateCurtainData(type: any) {
         let data: any = [];
@@ -291,14 +354,37 @@ export default defineComponent({
       display: inline-block;
       width: 56px;
       height: 56px;
+      // padding-bottom: 40px;
       background: #f1f4f6;
       border-radius: 50%;
       img {
         position: absolute;
         left: 50%;
         top: 50%;
-        width: 16px;
-        height: 16px;
+        // width: 16px;
+        // height: 16px;
+        transform: translate(-50%, -50%);
+      }
+      .title {
+        position: absolute;
+        bottom: -30px !important;
+        left: 8px !important;
+        display: block;
+        z-index: 333;
+      }
+    }
+
+    .control-item-active {
+      // position: relative;
+      background: rgba(206, 159, 39, 0.4);
+      .count-num {
+        position: absolute;
+        font-family: "Persagy";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        left: 50%;
+        top: 50%;
         transform: translate(-50%, -50%);
       }
     }

+ 8 - 8
src/views/envmonitor/components/Curtain/index.vue

@@ -64,10 +64,10 @@
         <!--左关-下关-->
         <div
           class="control-item"
-          :class="allActive == 1 ? 'control-item-active' : ''"
+          :class="activeIndex == 1 ? 'control-item-active' : ''"
           @click="openCurtainMain(1)"
         >
-          <template v-if="allActive !== 1">
+          <template v-if="activeIndex !== 1">
             <img
               v-if="
                 curtainData[0].equipmentType !== 4 &&
@@ -100,9 +100,9 @@
         <div
           class="control-item"
           @click="openCurtainMain(2)"
-          :class="allActive == 2 ? 'control-item-active' : ''"
+          :class="activeIndex == 2 ? 'control-item-active' : ''"
         >
-          <template v-if="allActive !== 2">
+          <template v-if="activeIndex !== 2">
             <img
               v-if="
                 curtainData[0].equipmentType !== 4 &&
@@ -252,7 +252,7 @@ export default defineComponent({
       parseImgUrl: parseImgUrl,
       timer: timer,
       // 开度弹窗
-      allActive: 0,
+      activeIndex: 0,
       // 打开开度弹窗
       openCurtainOpening(selectData: any) {
         contx.emit("showCurtainOpening", selectData);
@@ -294,7 +294,7 @@ export default defineComponent({
           proxyData.count--;
           if (proxyData.count == 0) {
             proxyData.count = 2;
-            proxyData.allActive = 0;
+            proxyData.activeIndex = 0;
             clearInterval(proxyData.interval);
           }
         }, 1000);
@@ -314,10 +314,10 @@ export default defineComponent({
       // 窗帘总开关
       openCurtainMain(type: any) {
         // type=1(关) type=2(开) type=3(暂停)
-        if (proxyData.allActive == type && proxyData.count !== 0) {
+        if (proxyData.activeIndex == type && proxyData.count !== 0) {
           return;
         }
-        proxyData.allActive = type;
+        proxyData.activeIndex = type;
         proxyData.count = 2;
         proxyData.countInterval();
         proxyData.formateCurtainData(type);