shuai16.wang
/
smart-screen-demo-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

细节修改

dev_230517
刘洪超 2 years ago
parent
80ed4c8697
commit
2506434e30
5 changed files with 158 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 179
      src/view/tabs/home-screen.vue
  5. 6
      src/view/ui/env-select.vue

3
src/styles/framework/base/flexbox.scss
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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) => {

179
src/view/tabs/home-screen.vue
Unescape View File

@ -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,7 +106,14 @@ @@ -82,7 +106,14 @@
</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";
@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save