Browse Source

细节修改

dev_230517
刘洪超 1 year ago
parent
commit
2506434e30
  1. 3
      src/styles/framework/base/flexbox.scss
  2. 30
      src/view/device-detail/whole-setting-range.vue
  3. 2
      src/view/device-detail/whole-setting.vue
  4. 181
      src/view/tabs/home-screen.vue
  5. 6
      src/view/ui/env-select.vue

3
src/styles/framework/base/flexbox.scss

@ -465,6 +465,9 @@ Flex, Grow, & Shrink 待确定 @@ -465,6 +465,9 @@ Flex, Grow, & Shrink 待确定
.margin-left-42 {
margin-left: 42px;
}
.margin-top-8{
margin-top: 8px;
}
.margin-top-24 {
margin-top: 24px;
}

30
src/view/device-detail/whole-setting-range.vue

@ -8,15 +8,25 @@ @@ -8,15 +8,25 @@
/>
<div class="zhp-title-text">全屋全感范围设定</div>
</div>
<div class="zhp-text-28-white margin-left-24">所选范围至少包含一台室内机和一台新风</div>
<div class="zhp-text-28-white margin-left-24 margin-top-8">
所选范围至少包含一台室内机和一台新风
</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)" />
<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>
@ -34,23 +44,23 @@ const settingList = ref([ @@ -34,23 +44,23 @@ const settingList = ref([
{
id: 1,
title: "客厅空调",
state: true
state: true,
},
{
id: 2,
title: "卧室空调",
state: false
state: false,
},
{
id: 3,
title: "儿童房空调",
state: true
state: true,
},
{
id: 4,
title: "新风除湿机",
state: false
}
state: false,
},
]);
</script>

2
src/view/device-detail/whole-setting.vue

@ -137,7 +137,7 @@ const setData = () => { @@ -137,7 +137,7 @@ const setData = () => {
* 全屋设定Event通知值变化
*/
const wholeSetting = () => {
proxy.$eventBusService.emit("queryData", tem.value, hum.value);
proxy.$eventBusService.emit("queryData", { tem: tem.value, hum: hum.value });
router.back();
};
const temSetting = (type: String) => {

181
src/view/tabs/home-screen.vue

@ -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>

6
src/view/ui/env-select.vue

@ -43,13 +43,13 @@ const itemOnClick = (item: any) => { @@ -43,13 +43,13 @@ const itemOnClick = (item: any) => {
const seasonList = ref([
{
id: 1,
tem: "14",
tem: "26",
season: "春季",
hum: 0
},
{
id: 2,
tem: "34",
tem: "32",
season: "夏季",
hum: 0
},
@ -61,7 +61,7 @@ const seasonList = ref([ @@ -61,7 +61,7 @@ const seasonList = ref([
},
{
id: 4,
tem: "-4",
tem: "-10",
season: "冬季",
hum: 0
}

Loading…
Cancel
Save