You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
7.7 KiB
366 lines
7.7 KiB
<template> |
|
<div class="base-bg"> |
|
<div class="zhp-title"> |
|
<img |
|
class="leftImg" |
|
src="@/assets/imgs/show/back.png" |
|
@click="router.back()" |
|
/> |
|
<div class="zhp-title-text">全屋设定</div> |
|
<div class="whole-fwsd" @click="router.push('/wholeSettingRange')"> |
|
范围设定 |
|
</div> |
|
<img |
|
class="whole-setting-what" |
|
src="@/assets/imgs/show/whole_setting_what.png" |
|
@click="router.push('/wholeSettingWhat')" |
|
/> |
|
<img class="whole-rightImg" src="@/assets/imgs/show/right.png" /> |
|
</div> |
|
<div class="whole-setting-bg"> |
|
<div class="whole-zd-white">自动</div> |
|
<img |
|
v-show="isAuto" |
|
class="whole-setting-close" |
|
src="@/assets/imgs/show/icon_open.png" |
|
@click="openAuto" |
|
/> |
|
<img |
|
v-show="!isAuto" |
|
class="whole-setting-close" |
|
src="@/assets/imgs/show/icon_close.png" |
|
@click="openAuto" |
|
/> |
|
<div class="whole-line"></div> |
|
<div class="whole-setting-reduce1" @click="temSetting('leftR')"> |
|
<img |
|
v-show="isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_-gray.png" |
|
/> |
|
<img |
|
v-show="!isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_-white.png" |
|
/> |
|
</div> |
|
<div class="whole-setting-reduce2" @click="temSetting('leftR2')"> |
|
<img |
|
v-show="isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_-gray.png" |
|
/> |
|
<img |
|
v-show="!isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_-white.png" |
|
/> |
|
</div> |
|
<div class="whole-setting-add1" @click="temSetting('rightA')"> |
|
<img |
|
v-show="isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_+gray.png" |
|
/> |
|
<img |
|
v-show="!isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_+white.png" |
|
/> |
|
</div> |
|
<div class="whole-setting-add2" @click="temSetting('rightA2')"> |
|
<img |
|
v-show="isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_+gray.png" |
|
/> |
|
<img |
|
v-show="!isAuto" |
|
class="whole-36" |
|
src="@/assets/imgs/show/whole_setting_+white.png" |
|
/> |
|
</div> |
|
<div class="zhp-vertical margin-top-115"> |
|
<div class="tem-top">{{ tem >= 0 && tem < 10 ? "0" + tem : tem }}</div> |
|
<div class="tem-seting1">温度设定</div> |
|
<div class="tem-top">{{ hum }}</div> |
|
<div class="tem-seting1">湿度设定</div> |
|
</div> |
|
<div class="zhp-vertical margin-top-129"> |
|
<div class="tem-seting2">℃</div> |
|
<div class="tem-seting2 margin-top-140">%</div> |
|
</div> |
|
</div> |
|
<div class="whole-bottom-btn" @click="wholeSetting">设定</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { getCurrentInstance, onActivated, onBeforeMount, ref } from "vue"; |
|
import router from "@/router"; |
|
|
|
const isAuto = ref(true); |
|
const tem = ref(16); |
|
const hum = ref(30); |
|
const { proxy } = getCurrentInstance() as any; |
|
const queryType = ref(1); |
|
|
|
onActivated(() => { |
|
const query: any = router.currentRoute.value.query; |
|
if (query) { |
|
queryType.value = query.type; |
|
setData(); |
|
} |
|
}); |
|
|
|
const setData = () => { |
|
switch (queryType.value) { |
|
case 1: //春季 |
|
tem.value = 24; |
|
hum.value = 50; |
|
break; |
|
case 2: //夏季 |
|
tem.value = 26; |
|
hum.value = 60; |
|
break; |
|
case 3: //梅雨 |
|
tem.value = 24; |
|
hum.value = 60; |
|
break; |
|
case 4: //冬季 |
|
tem.value = 22; |
|
hum.value = 50; |
|
break; |
|
} |
|
}; |
|
/** |
|
* 全屋设定，Event通知值变化 |
|
*/ |
|
const wholeSetting = () => { |
|
proxy.$eventBusService.emit("queryData", { tem: tem.value, hum: hum.value }); |
|
router.back(); |
|
}; |
|
const temSetting = (type: String) => { |
|
if (!isAuto.value) { |
|
switch (type) { |
|
case "leftR": |
|
if (tem.value > -20) { |
|
tem.value--; |
|
} |
|
break; |
|
case "rightA": |
|
if (tem.value < 100) { |
|
tem.value++; |
|
} |
|
break; |
|
case "leftR2": |
|
if (hum.value > 1) { |
|
hum.value--; |
|
} |
|
break; |
|
case "rightA2": |
|
if (hum.value < 100) { |
|
hum.value++; |
|
} |
|
break; |
|
} |
|
} |
|
}; |
|
/** |
|
* 自动开启关闭 |
|
*/ |
|
const openAuto = () => { |
|
isAuto.value = !isAuto.value; |
|
if (isAuto.value) { |
|
//自动 |
|
setData(); |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.whole-setting-bg { |
|
width: 672px; |
|
height: 440px; |
|
position: absolute; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
display: flex; |
|
justify-content: center; |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
background-image: url("@/assets/imgs/show/whole_setting_bg.png"); |
|
} |
|
|
|
.whole-line { |
|
height: 1px; |
|
position: absolute; |
|
top: 88px; |
|
right: 24px; |
|
left: 24px; |
|
background-color: rgba($color: #fff, $alpha: 0.2); |
|
} |
|
|
|
.whole-rightImg { |
|
position: absolute; |
|
width: 48px; |
|
height: 48px; |
|
right: 24px; |
|
} |
|
|
|
.whole-setting-what { |
|
width: 44px; |
|
height: 44px; |
|
position: absolute; |
|
right: 230px; |
|
} |
|
|
|
.whole-fwsd { |
|
position: absolute; |
|
right: 72px; |
|
font-size: 28px; |
|
color: white; |
|
font-weight: 400; |
|
} |
|
|
|
.whole-zd-gray { |
|
right: 128px; |
|
font-size: 28px; |
|
color: rgba($color: #fff, $alpha: 0.1); |
|
font-weight: 400; |
|
} |
|
|
|
.whole-zd-white { |
|
position: absolute; |
|
top: 30px; |
|
right: 128px; |
|
font-size: 28px; |
|
color: white; |
|
font-weight: 400; |
|
} |
|
|
|
.whole-setting-close { |
|
width: 92px; |
|
height: 48px; |
|
position: absolute; |
|
right: 24px; |
|
top: 20px; |
|
} |
|
|
|
.whole-setting-reduce1 { |
|
top: 124px; |
|
width: 110px; |
|
height: 110px; |
|
position: absolute; |
|
left: 84px; |
|
background-image: url("@/assets/imgs/show/whole_setting_+-bg.png"); |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
align-items: center; |
|
justify-content: center; |
|
display: flex; |
|
} |
|
|
|
.whole-setting-reduce2 { |
|
width: 110px; |
|
height: 110px; |
|
position: absolute; |
|
left: 84px; |
|
bottom: 36px; |
|
background-image: url("@/assets/imgs/show/whole_setting_+-bg.png"); |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
align-items: center; |
|
justify-content: center; |
|
display: flex; |
|
} |
|
|
|
.whole-setting-add1 { |
|
width: 110px; |
|
height: 110px; |
|
position: absolute; |
|
right: 84px; |
|
top: 124px; |
|
background-image: url("@/assets/imgs/show/whole_setting_+-bg.png"); |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
align-items: center; |
|
justify-content: center; |
|
display: flex; |
|
} |
|
|
|
.whole-setting-add2 { |
|
width: 110px; |
|
height: 110px; |
|
position: absolute; |
|
right: 84px; |
|
bottom: 36px; |
|
background-image: url("@/assets/imgs/show/whole_setting_+-bg.png"); |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
align-items: center; |
|
justify-content: center; |
|
display: flex; |
|
} |
|
|
|
.tem-bg { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
.tem-top { |
|
font-weight: 500; |
|
font-size: 76px; |
|
margin-bottom: 2px; |
|
margin-right: 6px; |
|
color: white; |
|
} |
|
|
|
.tem-seting1 { |
|
font-weight: 500; |
|
font-size: 24px; |
|
margin-bottom: 50px; |
|
color: white; |
|
} |
|
|
|
.tem-seting2 { |
|
font-weight: 500; |
|
font-size: 24px; |
|
color: white; |
|
} |
|
|
|
.whole-bottom-btn { |
|
bottom: 30px; |
|
position: absolute; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 672px; |
|
height: 110px; |
|
background-image: url("@/assets/imgs/show/bg_btn.png"); |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
color: #ffffff; |
|
font-size: 40px; |
|
font-weight: 400; |
|
} |
|
|
|
.whole-36 { |
|
width: 36px; |
|
height: 36px; |
|
} |
|
|
|
.margin-top-115 { |
|
margin-top: 115px; |
|
} |
|
|
|
.margin-top-129 { |
|
margin-top: 129px; |
|
} |
|
|
|
.margin-top-140 { |
|
margin-top: 140px; |
|
} |
|
</style>
|
|
|