|
|
|
@ -3,77 +3,101 @@
@@ -3,77 +3,101 @@
|
|
|
|
|
<div class="bg-video" @click="changeAnimation()"> |
|
|
|
|
<!-- 关机动画循环 --> |
|
|
|
|
<video |
|
|
|
|
v-show="currentAnimation === 0" |
|
|
|
|
ref="animationShutdown" |
|
|
|
|
src="@/assets/imgs/home-screen/shutdown_loop.mp4" |
|
|
|
|
autoplay |
|
|
|
|
loop |
|
|
|
|
muted |
|
|
|
|
v-show="currentAnimation === 0" |
|
|
|
|
ref="animationShutdown" |
|
|
|
|
></video> |
|
|
|
|
<!-- 开机进场动画 --> |
|
|
|
|
<video |
|
|
|
|
v-show="currentAnimation === 1" |
|
|
|
|
ref="animationApproach" |
|
|
|
|
src="@/assets/imgs/home-screen/approach.mp4" |
|
|
|
|
muted |
|
|
|
|
autoplay |
|
|
|
|
v-show="currentAnimation === 1" |
|
|
|
|
ref="animationApproach" |
|
|
|
|
></video> |
|
|
|
|
<!-- 开机循环动画 --> |
|
|
|
|
<video |
|
|
|
|
v-show="currentAnimation === 2" |
|
|
|
|
ref="animationPower" |
|
|
|
|
src="@/assets/imgs/home-screen/power_on_loop.mp4" |
|
|
|
|
autoplay |
|
|
|
|
loop |
|
|
|
|
muted |
|
|
|
|
v-show="currentAnimation === 2" |
|
|
|
|
ref="animationPower" |
|
|
|
|
></video> |
|
|
|
|
<!-- 关机退场动画 --> |
|
|
|
|
<video |
|
|
|
|
v-show="currentAnimation === 3" |
|
|
|
|
ref="animationExit" |
|
|
|
|
src="@/assets/imgs/home-screen/exit.mp4" |
|
|
|
|
muted |
|
|
|
|
autoplay |
|
|
|
|
v-show="currentAnimation === 3" |
|
|
|
|
ref="animationExit" |
|
|
|
|
></video> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="nav-top"> |
|
|
|
|
<div class="wifi-icon"> |
|
|
|
|
<img src="@/assets/imgs/home-screen/WIFI@2x.png" alt=""> |
|
|
|
|
<img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="weather">雪天</div> |
|
|
|
|
<div class="temp">-26℃</div> |
|
|
|
|
<div class="weather">{{ seasonName }}</div> |
|
|
|
|
<div class="temp">{{ seasonTem }}℃</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="content"> |
|
|
|
|
<div class="content-left"> |
|
|
|
|
<div class="time disabled-scroll" @touchstart="timeTouchStart" @touchend="timeTouchEnd"> |
|
|
|
|
<div |
|
|
|
|
class="time disabled-scroll" |
|
|
|
|
@touchstart="timeTouchStart" |
|
|
|
|
@touchend="timeTouchEnd" |
|
|
|
|
> |
|
|
|
|
{{ hour }}<span>:</span>{{ minutes }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="content-right"> |
|
|
|
|
<div class="message"> |
|
|
|
|
<img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()"> |
|
|
|
|
<img |
|
|
|
|
src="@/assets/imgs/home-screen/message@2x.png" |
|
|
|
|
class="message-img" |
|
|
|
|
@click="goMessagePage()" |
|
|
|
|
/> |
|
|
|
|
<!-- 消息数量提醒 --> |
|
|
|
|
<div class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div> |
|
|
|
|
<div v-show="messageNum > 0" class="message-confim"> |
|
|
|
|
{{ messageNum }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="backups"> |
|
|
|
|
<img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img" @click="wholeSetting"> |
|
|
|
|
<img |
|
|
|
|
src="@/assets/imgs/home-screen/backups@2x.png" |
|
|
|
|
class="backups-img" |
|
|
|
|
@click="wholeSetting" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 温湿度数值展示 --> |
|
|
|
|
<div class="indoor-value" v-if="showNumScoll" ref="indoorValue"> |
|
|
|
|
<div v-if="showNumScoll" ref="indoorValue" class="indoor-value"> |
|
|
|
|
<div class="indoor-temp"> |
|
|
|
|
<count-to :startVal="90" :endVal="26" :duration="3000" class="indoor-temp-value"></count-to> |
|
|
|
|
<count-to |
|
|
|
|
:start-val="startTem" |
|
|
|
|
:end-val="tem" |
|
|
|
|
:duration="3000" |
|
|
|
|
class="indoor-temp-value" |
|
|
|
|
></count-to> |
|
|
|
|
</div> |
|
|
|
|
<div class="indoor-humi"> |
|
|
|
|
<count-to :startVal="1" :endVal="58" :duration="3000" class="indoor-humi-value"></count-to> |
|
|
|
|
<count-to |
|
|
|
|
:start-val="startHum" |
|
|
|
|
:end-val="hum" |
|
|
|
|
:duration="3000" |
|
|
|
|
class="indoor-humi-value" |
|
|
|
|
></count-to> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 室内环境 --> |
|
|
|
|
<div class="indoor-setting" ref="indoorSetting"> |
|
|
|
|
<div ref="indoorSetting" class="indoor-setting"> |
|
|
|
|
<div class="tovc-value">2</div> |
|
|
|
|
<div class="pm25-value">500</div> |
|
|
|
|
<div class="co2-value">400</div> |
|
|
|
@ -82,9 +106,16 @@
@@ -82,9 +106,16 @@
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { ref, onMounted, onUnmounted, onActivated } from "vue"; |
|
|
|
|
import { |
|
|
|
|
ref, |
|
|
|
|
onMounted, |
|
|
|
|
onUnmounted, |
|
|
|
|
onActivated, |
|
|
|
|
getCurrentInstance, |
|
|
|
|
onBeforeMount, |
|
|
|
|
} from "vue"; |
|
|
|
|
import router from "@/router"; |
|
|
|
|
import {CountTo} from "vue3-count-to"; |
|
|
|
|
import { CountTo } from "vue3-count-to"; |
|
|
|
|
|
|
|
|
|
/** 小时 */ |
|
|
|
|
const hour = ref("--"); |
|
|
|
@ -122,19 +153,61 @@ const indoorSetting: any = ref(null);
@@ -122,19 +153,61 @@ const indoorSetting: any = ref(null);
|
|
|
|
|
const showNumScoll = ref(false); |
|
|
|
|
/** 时间长按定时器 */ |
|
|
|
|
const timePushTimer: any = ref(null); |
|
|
|
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as any; |
|
|
|
|
const tem = ref(26); |
|
|
|
|
const hum = ref(58); |
|
|
|
|
const startTem = ref(26); |
|
|
|
|
const startHum = ref(58); |
|
|
|
|
const seasonName = ref("雪天"); |
|
|
|
|
const seasonTem = ref(-10); |
|
|
|
|
onBeforeMount(() => { |
|
|
|
|
proxy.$eventBusService.on("queryType", setType); |
|
|
|
|
//温度、湿度数据 |
|
|
|
|
proxy.$eventBusService.on("queryData", queryData); |
|
|
|
|
}); |
|
|
|
|
/** |
|
|
|
|
* 季节类型1春季 |
|
|
|
|
* @param type |
|
|
|
|
*/ |
|
|
|
|
const setType = (type: any) => { |
|
|
|
|
currentType.value = type; |
|
|
|
|
switch (currentType.value) { |
|
|
|
|
case 1: //春季 |
|
|
|
|
seasonName.value = "多云"; |
|
|
|
|
seasonTem.value = 26; |
|
|
|
|
break; |
|
|
|
|
case 2: //夏季 |
|
|
|
|
seasonName.value = "晴天"; |
|
|
|
|
seasonTem.value = 32; |
|
|
|
|
break; |
|
|
|
|
case 3: //梅雨 |
|
|
|
|
seasonName.value = "雨天"; |
|
|
|
|
seasonTem.value = 16; |
|
|
|
|
break; |
|
|
|
|
case 4: //冬季 |
|
|
|
|
seasonName.value = "雪天"; |
|
|
|
|
seasonTem.value = -10; |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const queryData = (data: any) => { |
|
|
|
|
tem.value = data.tem; |
|
|
|
|
hum.value = data.hum; |
|
|
|
|
}; |
|
|
|
|
onActivated(() => { |
|
|
|
|
animationShutdown.value && animationShutdown.value.play(); |
|
|
|
|
animationPower.animationPower && animationPower.value.play(); |
|
|
|
|
}) |
|
|
|
|
animationPower.value.animationPower && animationPower.value.play(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
getTimeTimer.value = setInterval(() => { |
|
|
|
|
const date = new Date(); |
|
|
|
|
hour.value = date.getHours() < 10? ('0' + date.getHours()): ('' + date.getHours()); |
|
|
|
|
minutes.value = date.getMinutes() < 10? ('0' + date.getMinutes()): ('' + date.getMinutes()); |
|
|
|
|
hour.value = |
|
|
|
|
date.getHours() < 10 ? "0" + date.getHours() : "" + date.getHours(); |
|
|
|
|
minutes.value = |
|
|
|
|
date.getMinutes() < 10 ? "0" + date.getMinutes() : "" + date.getMinutes(); |
|
|
|
|
}, 1000); |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
|
// 清除定时器 |
|
|
|
@ -143,12 +216,17 @@ onUnmounted(() => {
@@ -143,12 +216,17 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 全屋设定 |
|
|
|
|
* |
|
|
|
|
*/ |
|
|
|
|
const wholeSetting = () => { |
|
|
|
|
//初始动画值 |
|
|
|
|
startTem.value=tem.value; |
|
|
|
|
startHum.value=hum.value; |
|
|
|
|
router.push({ |
|
|
|
|
path: "/wholeSetting", query: { |
|
|
|
|
path: "/wholeSetting", |
|
|
|
|
query: { |
|
|
|
|
type: currentType.value, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -164,7 +242,7 @@ const envSelect = () => {
@@ -164,7 +242,7 @@ const envSelect = () => {
|
|
|
|
|
/** 跳转消息页面 */ |
|
|
|
|
const goMessagePage = () => { |
|
|
|
|
router.push("/message"); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 动画切换 */ |
|
|
|
|
const changeAnimation = () => { |
|
|
|
@ -190,12 +268,11 @@ const changeAnimation = () => {
@@ -190,12 +268,11 @@ const changeAnimation = () => {
|
|
|
|
|
indoorSetting.value.style.opacity = "1"; |
|
|
|
|
indoorSetting.value.style.transform = "translateY(0)"; |
|
|
|
|
} |
|
|
|
|
}, 9.5 * 1000) |
|
|
|
|
}, 9.5 * 1000); |
|
|
|
|
setTimeout(() => { |
|
|
|
|
currentAnimation.value = 2; |
|
|
|
|
}, 10.6 * 1000); |
|
|
|
|
} else if (currentAnimation.value === 1 || currentAnimation.value === 3) { |
|
|
|
|
return; |
|
|
|
|
} else if (currentAnimation.value === 2) { |
|
|
|
|
if (animationExit.value) { |
|
|
|
|
animationExit.value.play(); |
|
|
|
@ -221,27 +298,27 @@ const changeAnimation = () => {
@@ -221,27 +298,27 @@ const changeAnimation = () => {
|
|
|
|
|
} |
|
|
|
|
}, 4.6 * 1000); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 时间长按开始 */ |
|
|
|
|
const timeTouchStart = () => { |
|
|
|
|
timePushTimer.value = setTimeout(() => { |
|
|
|
|
envSelect(); |
|
|
|
|
}, 10 * 1000); |
|
|
|
|
} |
|
|
|
|
}, 1000); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 时间长按结束 */ |
|
|
|
|
const timeTouchEnd = () => { |
|
|
|
|
clearTimeout(timePushTimer.value); |
|
|
|
|
timePushTimer.value = null; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
#home-screen-wrapper { |
|
|
|
|
width: 100vw; |
|
|
|
|
height: 100vh; |
|
|
|
|
background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat; |
|
|
|
|
background: url("@/assets/imgs/home-screen/snow@2x.png") no-repeat; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
overflow: hidden; |
|
|
|
|
display: flex; |
|
|
|
@ -265,7 +342,7 @@ const timeTouchEnd = () => {
@@ -265,7 +342,7 @@ const timeTouchEnd = () => {
|
|
|
|
|
.nav-top { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
color: #FFF; |
|
|
|
|
color: #fff; |
|
|
|
|
margin-top: 12px; |
|
|
|
|
|
|
|
|
|
flex-shrink: 0; |
|
|
|
@ -301,12 +378,11 @@ const timeTouchEnd = () => {
@@ -301,12 +378,11 @@ const timeTouchEnd = () => {
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
z-index: 99; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.content-left { |
|
|
|
|
margin-left: 24px; |
|
|
|
|
|
|
|
|
|
.time { |
|
|
|
|
color: #FFF; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 57px; |
|
|
|
|
font-family: Roboto-Light, Roboto; |
|
|
|
|
display: flex; |
|
|
|
@ -339,11 +415,11 @@ const timeTouchEnd = () => {
@@ -339,11 +415,11 @@ const timeTouchEnd = () => {
|
|
|
|
|
width: 30px; |
|
|
|
|
height: 30px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background-color: #D65659; |
|
|
|
|
background-color: #d65659; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
color: #FFF; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -352,15 +428,17 @@ const timeTouchEnd = () => {
@@ -352,15 +428,17 @@ const timeTouchEnd = () => {
|
|
|
|
|
|
|
|
|
|
.indoor-value { |
|
|
|
|
z-index: 99; |
|
|
|
|
color: #FFF; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.indoor-temp, .indoor-humi { |
|
|
|
|
.indoor-temp, |
|
|
|
|
.indoor-humi { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: flex-start; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.indoor-temp-value, .indoor-humi-value { |
|
|
|
|
.indoor-temp-value, |
|
|
|
|
.indoor-humi-value { |
|
|
|
|
font-size: 76px; |
|
|
|
|
width: 90px; |
|
|
|
|
display: flex; |
|
|
|
@ -392,24 +470,27 @@ const timeTouchEnd = () => {
@@ -392,24 +470,27 @@ const timeTouchEnd = () => {
|
|
|
|
|
transform: translateY(30px); |
|
|
|
|
|
|
|
|
|
.tovc-value { |
|
|
|
|
color: #D0A24A; |
|
|
|
|
color: #d0a24a; |
|
|
|
|
margin-left: 120px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pm25-value { |
|
|
|
|
color: #D96F72; |
|
|
|
|
color: #d96f72; |
|
|
|
|
margin-left: 100px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.co2-value { |
|
|
|
|
color: #FFF; |
|
|
|
|
color: #fff; |
|
|
|
|
margin-left: 110px; |
|
|
|
|
} |
|
|
|
|
.tovc-value, .pm25-value, .co2-value { |
|
|
|
|
.tovc-value, |
|
|
|
|
.pm25-value, |
|
|
|
|
.co2-value { |
|
|
|
|
width: 90px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}</style> |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|