刘洪超
2 years ago
23 changed files with 725 additions and 144 deletions
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 443 B |
|
After Width: | Height: | Size: 447 B |
|
After Width: | Height: | Size: 366 B |
|
After Width: | Height: | Size: 378 B |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,76 @@
@@ -0,0 +1,76 @@
|
||||
<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> |
||||
<div class="zhp-text-28-white margin-left-24">所选范围至少包含一台室内机和一台新风</div> |
||||
<div class="zhp-item-bg"> |
||||
<vid v-for="(item, i) in settingList" :key="i"> |
||||
<div class="whole-setting-item-bg"> |
||||
<div class="zhp-text-32-white margin-left-24">{{ item.title }}</div> |
||||
<img v-show="item.state" class="whole-select-img" src="@/assets/imgs/show/icon_select.png" |
||||
@click="select(item)" /> |
||||
<img v-show="!item.state" class="whole-select-img" src="@/assets/imgs/show/icon_nomor.png" |
||||
@click="select(item)" /> |
||||
</div> |
||||
</vid> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import router from "@/router"; |
||||
import { ref } from "vue"; |
||||
|
||||
const select = (item: any) => { |
||||
item.state = !item.state; |
||||
}; |
||||
const settingList = ref([ |
||||
{ |
||||
id: 1, |
||||
title: "客厅空调", |
||||
state: true |
||||
}, |
||||
{ |
||||
id: 2, |
||||
title: "卧室空调", |
||||
state: false |
||||
}, |
||||
{ |
||||
id: 3, |
||||
title: "儿童房空调", |
||||
state: true |
||||
}, |
||||
{ |
||||
id: 4, |
||||
title: "新风除湿机", |
||||
state: false |
||||
} |
||||
]); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.whole-setting-item-bg { |
||||
position: relative; |
||||
background-color: #20252e; |
||||
background-origin: border-box; |
||||
border-radius: 16px; |
||||
display: flex; |
||||
width: 326px; |
||||
height: 108px; |
||||
align-items: center; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.whole-select-img { |
||||
width: 60px; |
||||
height: 60px; |
||||
position: absolute; |
||||
right: 24px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,38 @@
@@ -0,0 +1,38 @@
|
||||
<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> |
||||
<div class="zhp-vertical zhp-horizontal-cetter"> |
||||
<img class="w-h-200" src="@/assets/imgs/show/whole_setting_logo.png"> |
||||
<div class="setting-detail-text zhp-text-28-white">{{ detailText }}</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
|
||||
import router from "@/router"; |
||||
|
||||
const detailText = "温度设定、湿度设定是全屋空调系统运行的目标值。推荐数据来源于云平台大数据计算，" + |
||||
"您可以根据个人的偏好进行“+、-”调节。智慧屏会结合您的偏好完成智能调整。"; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
.w-h-200 { |
||||
position: relative; |
||||
top: 73px; |
||||
width: 200px; |
||||
height: 200px; |
||||
} |
||||
.setting-detail-text{ |
||||
position: relative; |
||||
width: 624px; |
||||
top: 148px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,366 @@
@@ -0,0 +1,366 @@
|
||||
<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("selectNumEvent", tem); |
||||
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> |
||||
Loading…
Reference in new issue