|
@@ -23,18 +23,22 @@
|
|
|
<div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
|
|
|
</div>
|
|
|
<div class="temp" v-if="isOpen">
|
|
|
- 26
|
|
|
+ {{ realTemp }}
|
|
|
<sup>℃</sup>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--温度⏭️-->
|
|
|
- <div class="temp-box" v-if="isOpen">
|
|
|
+ <div class="temp-box" id="sliderAirId" v-if="isOpen">
|
|
|
<div class="bar">
|
|
|
- <div class="text text-left active-text">12</div>
|
|
|
- <div class="active-bar">
|
|
|
- <div class="line"></div>
|
|
|
+ <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 class="text text-right">32</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -63,22 +67,22 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
+<script>
|
|
|
import {
|
|
|
defineComponent,
|
|
|
onMounted,
|
|
|
reactive,
|
|
|
toRefs,
|
|
|
computed,
|
|
|
+ nextTick,
|
|
|
watch,
|
|
|
onUnmounted,
|
|
|
onBeforeMount,
|
|
|
onBeforeUnmount,
|
|
|
} from "vue";
|
|
|
import { Switch, Dialog, Loading, Toast } from "vant";
|
|
|
-import { parseImgUrl } from "@/utils";
|
|
|
-import { Item } from "../../../../../model/getRolesModel";
|
|
|
-import any = jasmine.any;
|
|
|
+import { parseImgUrl, fix } from "@/utils";
|
|
|
+import { swiper } from "@/utils/swiper";
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
@@ -90,10 +94,103 @@ export default defineComponent({
|
|
|
const proxyData = reactive({
|
|
|
parseImgUrl: parseImgUrl,
|
|
|
isOpen: false,
|
|
|
+ airData: {
|
|
|
+ minTempSet: 16,
|
|
|
+ maxTempSet: 32,
|
|
|
+ airTemp: 0,
|
|
|
+ },
|
|
|
+ part: 1,
|
|
|
+ realTemp: 24,
|
|
|
+ isWhite: false,
|
|
|
+ barWidth: 73,
|
|
|
getAirStatus() {
|
|
|
- console.log(proxyData.isOpen);
|
|
|
+ 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(() => {});
|
|
@@ -114,7 +211,7 @@ export default defineComponent({
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 24px 24px 44px 24px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
+ 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 {
|
|
@@ -134,6 +231,8 @@ export default defineComponent({
|
|
|
align-items: end;
|
|
|
.temp {
|
|
|
//styleName: En/H2;
|
|
|
+ width: 80px;
|
|
|
+ text-align: right;
|
|
|
font-family: Jost;
|
|
|
font-size: 20px;
|
|
|
font-weight: 300;
|
|
@@ -207,14 +306,21 @@ export default defineComponent({
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
z-index: 1;
|
|
|
- width: 73px;
|
|
|
+ // width: 73px;
|
|
|
+ // min-width: 18px;
|
|
|
height: 30px;
|
|
|
border-radius: 10px;
|
|
|
- .line {
|
|
|
+ .hand-box {
|
|
|
+ padding-left: 6px;
|
|
|
+ padding-right: 6px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
- right: 9px;
|
|
|
+ right: 0px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ margin-top: 9px;
|
|
|
height: 12px;
|
|
|
width: 2px;
|
|
|
background: rgba(255, 255, 255, 0.8);
|