细节修改

src/styles/framework/base/flexbox.scss

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

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

@@ -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([
   {
     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>
 

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

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

src/view/tabs/home-screen.vue

@@ -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 @@
 </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);
 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(() => {
 
 /**
  * 全屋设定
+ *
  */
 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 = () => {
 /** 跳转消息页面 */
 const goMessagePage = () => {
   router.push("/message");
-}
+};
 
 /** 动画切换 */
 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 = () => {
       }
     }, 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 = () => {
   .nav-top {
     display: flex;
     align-items: center;
-    color: #FFF;
+    color: #fff;
     margin-top: 12px;
 
     flex-shrink: 0;
@@ -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 = () => {
           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 = () => {
 
   .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 = () => {
     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>

src/view/ui/env-select.vue

@@ -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([
   },
   {
     id: 4,
-    tem: "-4",
+    tem: "-10",
     season: "冬季",
     hum: 0
   }