sagacloud-sagacare-ipad/src/views/envmonitor/taiguv1/components/Air/index.vue

<template>
  <div class="volumn-box" :class="isOpen ? 'active' : ''">
    <div class="top">
      <img
        :src="
          parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/air-con.svg' : 'air-con.svg')
        "
        alt=""
      />
      <div class="top-right">
        <Switch
          @change="getAirStatus"
          class="switch-btn"
          inactive-color="rgba(0, 0, 0, 0.3)"
          v-model="isOpen"
        />
      </div>
    </div>
    <div class="bottom">
      <div class="air-info">
        <div class="left">
          <div class="text">空调</div>
          <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
        </div>
        <div class="temp" v-if="isOpen">
          {{ realTemp }}
          <sup>℃</sup>
        </div>
      </div>
      <!--温度⏭️-->
      <div class="temp-box" id="sliderAirId" v-if="isOpen">
        <div class="bar">
          <div class="text text-left active-text">{{ airData.minTempSet }}</div>
          <div class="active-bar" :style="{ width: barWidth + 'px' }" id="barAirId">
            <div class="hand-box" id="handAirId">
              <div class="line"></div>
            </div>
          </div>
          <div class="text text-right" :class="isWhite ? 'active-text' : ''">
            {{ airData.maxTempSet }}
          </div>
        </div>
      </div>

      <!--风量调整-->
      <div class="air-volume" v-if="isOpen">
        <div class="volume-left">
          <div class="volume-top">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span class="span-active">4</span>
          </div>
          <div class="text">风量调节</div>
        </div>
        <div class="volume-right">
          <div class="control-item">
            <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'minus.svg')" />
          </div>
          <div class="control-item">
            <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'plus.svg')" />
          </div>
          <div class="control-item">A</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  computed,
  nextTick,
  watch,
  onUnmounted,
  onBeforeMount,
  onBeforeUnmount,
} from "vue";
import { Switch, Dialog, Loading, Toast } from "vant";
import { parseImgUrl, fix } from "@/utils";
import { swiper } from "@/utils/swiper";

export default defineComponent({
  components: {
    Switch,
    [Dialog.Component.name]: Dialog.Component,
    Loading,
  },
  setup(props, contx) {
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      isOpen: false,
      airData: {
        minTempSet: 16,
        maxTempSet: 32,
        airTemp: 0,
      },
      part: 1,
      realTemp: 24,
      isWhite: false,
      barWidth: 73,
      getAirStatus() {
        if (proxyData.isOpen) {
          nextTick(() => {
            proxyData.endBoxSwiper();
          });
        }
        contx.emit("getStatus", proxyData.isOpen);
      },
      getEleWidth(ele) {
        // debugger;
        if (ele) {
          return ele.getBoundingClientRect().width;
        } else {
          return 1;
        }
      },
      endBoxSwiper() {
        let sliderBox = document.querySelector("#sliderAirId");
        let handBox = document.querySelector("#handAirId");
        let barBox = document.querySelector("#barAirId");
        let isMove = false;
        let sliderWidth = proxyData.getEleWidth(sliderBox);
        let startBarWidth = proxyData.getEleWidth(barBox);
        if (sliderWidth > 1) {
          sliderWidth = sliderWidth;
        }
        let tempPart =
          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
          (sliderWidth - 30);
        let part = tempPart;
        proxyData.part = tempPart;
        if (!handBox) {
          return;
        }

        handBox.addEventListener("touchstart", function (e) {
          let oldBarWidth = (barBox && barBox.style && barBox.style.width) || 0;
          startBarWidth = isNaN(parseInt(oldBarWidth)) ? 0 : parseInt(oldBarWidth);
          isMove = true;
        });
        handBox.addEventListener("touchend", function (e) {
          isMove = false;
        });
        swiper(handBox, {
          swipeLeft: function (e) {
            if (isMove) {
              let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
              let barWidth = startBarWidth - moveRealX;
              barWidth = barWidth < 30 ? 30 : barWidth;
              if (barWidth >= sliderWidth) {
                proxyData.isWhite = true;
              } else {
                proxyData.isWhite = false;
              }

              barBox.style.width = barWidth + "px";
              let realTemp = proxyData.airData.minTempSet + barWidth * part;
              if (realTemp > proxyData.airData.maxTempSet) {
                realTemp = proxyData.airData.maxTempSet;
              }
              if (realTemp) {
                proxyData.realTemp = fix(realTemp.toFixed(1));
              }
            }
          },
          swipeRight: function (e) {
            if (isMove) {
              let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
              let barWidth = startBarWidth + moveRealX;
              barWidth = barWidth > sliderWidth ? sliderWidth : barWidth;
              if (barWidth >= sliderWidth) {
                proxyData.isWhite = true;
              } else {
                proxyData.isWhite = false;
              }
              barBox.style.width = barWidth + "px";

              let realTemp = barWidth * part + proxyData.airData.minTempSet;
              if (realTemp > proxyData.airData.maxTempSet) {
                realTemp = proxyData.airData.maxTempSet;
              }
              if (realTemp) {
                proxyData.realTemp = fix(realTemp.toFixed(1));
              }
            }
          },
        });
      },
    });
    onBeforeUnmount(() => {});
    onMounted(() => {});

    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.volumn-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  width: 100%;
  height: 100%;
  border-radius: 24px 24px 44px 24px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(40px);
  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
  .top {
    display: flex;
    justify-content: space-between;
    img {
      width: 30px;
    }
  }
  .bottom {
    width: 100%;
    // margin-top: 18vh;
    // margin-top: 109px;
    .air-info {
      display: flex;
      justify-content: space-between;
      align-items: end;
      .temp {
        //styleName: En/H2;
        width: 80px;
        text-align: right;
        font-family: Jost;
        font-size: 20px;
        font-weight: 300;
        line-height: 28px;
        color: rgba(0, 20, 40, 1);
        sup {
          //styleName: En/Body XS;
          font-family: Jost;
          font-size: 11px;
          font-weight: 400;
          line-height: 15px;
          color: rgba(0, 20, 40, 1);
        }
      }
    }
    .text {
      //styleName: Chi/Body Large;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 300;
      line-height: 22px;
      letter-spacing: 0.02em;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(255, 255, 255, 1);
      padding-bottom: 2px;
    }
    .status {
      //styleName: Chi/Body XS;
      font-family: PingFang SC;
      font-size: 11px;
      font-weight: 400;
      line-height: 15px;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.4);
    }
    .temp-box {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 2px;
      margin-top: 8px;
      height: 34px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.6);
      .text {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-family: Jost;
        font-size: 11px;
        font-weight: 400;
        line-height: 15px;
        color: rgba(116, 128, 141, 1);
        z-index: 2;
      }
      .text-left {
        left: 8px;
      }
      .text-right {
        right: 8px;
      }
      .active-text {
        color: rgba(255, 255, 255, 0.6);
      }
      .active-bar {
        position: absolute;
        background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%);
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        // width: 73px;
        // min-width: 18px;
        height: 30px;
        border-radius: 10px;
        .hand-box {
          padding-left: 6px;
          padding-right: 6px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0px;
          height: 100%;
        }
        .line {
          margin-top: 9px;
          height: 12px;
          width: 2px;
          background: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
  .switch-btn {
    margin-top: 0;
    width: 50px !important;
    height: 28px !important;
    border: none;
  }
}
.active {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);

  .bottom {
    .text {
      color: rgba(0, 20, 40, 1);
    }
    .status {
      color: rgba(116, 128, 141, 1);
    }
  }
}
.air-volume {
  display: flex;
  margin-top: 12px;
  .volume-left {
    width: 69px;
    .volume-top {
      padding-bottom: 2px;
      height: 3.33vh;
      line-height: 1;
      span {
        //styleName: En/Body Small;
        display: inline-block;
        margin-right: 5px;
        font-family: Jost;
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        color: rgba(116, 128, 141, 1);
      }
      .span-active {
        color: rgba(0, 20, 40, 1);
        font-size: 16px;
        line-height: 22px;
      }
    }
    .text {
      //styleName: Chi/Body XS;
      font-family: PingFang SC;
      font-size: 11px;
      font-weight: 400;
      line-height: 15px;
      letter-spacing: 0.02em;
      color: rgba(0, 20, 40, 1);
    }
  }
  .volume-right {
    width: 120px;
    display: flex;
    justify-content: space-between;
    .control-item {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(60px);
      border-radius: 50%;
      text-align: center;
      .icon {
        width: 20px;
        height: 20px;
        margin-top: 8px;
      }
      &:nth-child(3) {
        font-family: Jost;
        font-size: 16px;
        font-weight: 300;
        line-height: 36px;
        text-align: center;
        color: rgba(0, 20, 40, 1);
      }
    }
  }
}
</style>
<style lang="scss">
.volumn-box {
  .van-switch__node {
    background: rgba(255, 255, 255, 0.6);
    width: 24px;
    height: 24px;
    top: 0.33vh;
    // top: 50%;
    // transform: translateY(-50%);
  }
  .van-switch--on.switch-btn {
    .van-switch__node {
      transform: translate(calc(50px - 28px)) !important;
    }
  }
  .van-switch--on {
    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
    .van-switch__node {
      background: #fff !important;
    }
  }
  .van-loading__spinner {
    color: $elActiveColor !important;
  }

  .van-switch__loading {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 1;
  }

  .van-switch--disabled {
    opacity: 0.5;
  }
}
</style>