优化空调控制页数据

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

@@ -26,7 +26,7 @@
             </div>
 
             <!-- 清洁度 -->
-            <div class="cleanliness" v-show="activeTab === 0">
+            <div class="cleanliness" v-show="false && activeTab === 0">
                 <div class="cleanliness-text">清洁度</div>
                 <div class="cleanliness-container">
                     <div class="cleanliness-progress" ref="cleanlinessProgress"></div>
@@ -64,7 +64,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onBeforeMount, onMounted, onActivated } from 'vue';
+import { ref, onBeforeMount, onMounted, onActivated, nextTick } from 'vue';
 import { useRouter, onBeforeRouteUpdate } from "vue-router";
 import NormalMode from './mode/normal.vue';
 import SmartMode from './mode/smart.vue';
@@ -112,18 +112,26 @@ const showWindDire = ref(true);
 const deviceType = ref();
 
 onActivated(() => {
+    // 为了刷新dom 用v-if刷新
+    activeTab.value = activeTab.value === 0? 1: 0;
     // 路由参数接收
     const query: any = router.currentRoute.value.query;
     titelName.value = query.name;
     ifRun.value = query.openFlg === 'true'? true: false;
-    activeTab.value = parseInt(query.setMode);
-    smartMode.value = parseInt(query.smartMode);
     deviceType.value = query.deviceType;
     if (query.deviceType === '4E') {
         showTabs.value = false;
         showWind.value = false;
         showWindDire.value = false;
+    } else {
+        showTabs.value = true;
+        showWind.value = true;
+        showWindDire.value = true;
     }
+    nextTick(() => {
+        activeTab.value = parseInt(query.setMode);
+        smartMode.value = parseInt(query.smartMode);
+    })
 })
 
 onMounted(() => {
@@ -131,7 +139,6 @@ onMounted(() => {
         cleanlinessProgress.value.style.background = (cleanliness.value < 100 / 2)? '#D65659': '#278958';
         cleanlinessProgress.value.style.width = `${cleanliness.value}%`;
     }
-
     if (cleanlinessReminder.value) {
         let cleanlinessReminderColor = '';
         if (isClean.value === 0 && (cleanliness.value < 100 / 2)) {

src/view/device-detail/mode/wind-dire-dic.ts

@@ -0,0 +1,9 @@
+/**
+ * 风向字典
+ */
+
+const WindDireOptions = [
+    {}
+];
+
+export {};

src/view/tabs/device-control.vue

@@ -119,9 +119,9 @@ onMounted(() => {
             openFlg: true,
             deviceType: '02',
             self_clean: 0,
-            statusArr: ['25', '68'],
+            statusArr: ['23', '56'],
             unitArr: ['℃', '%'],
-            airQuality: '良',
+            airQuality: '优',
             setMode: 0,
             smartMode: SmartModeEnum.COLD,
         }

src/view/tabs/home-screen.vue

@@ -1,5 +1,16 @@
 <template>
     <div id="home-screen-wrapper">
+        <div class="nav-top">
+            <div class="wifi-icon">
+                <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
+            </div>
+            <div class="weather">雪天</div>
+            <div class="temp">-26℃</div>
+        </div>
+        <div class="content">
+            <div class="content-left"></div>
+            <div class="content-right"></div>
+        </div>
         <div class="ceshi">
             <img id="imgs" src="" width="100%">
         </div>
@@ -7,7 +18,6 @@
 </template>
 
 <script lang="ts" setup>
-import { time } from 'console';
 import { ref, onMounted } from 'vue';
 
 const aniImgs: any = ref([]);
@@ -51,7 +61,35 @@ const change = () => {
 #home-screen-wrapper {
     width: 100vh;
     height: 100vh;
-    background: rgb(15, 188, 102);
+    background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+
+    .nav-top {
+        display: flex;
+        align-items: center;
+        color: #FFF;
+        margin-top: 12px;
+
+        .wifi-icon {
+            margin-left: 24px;
+
+            img {
+                width: 28px;
+                height: 28px;
+            }
+        }
+
+        .weather {
+            font-size: 24px;
+            margin-left: 16px;
+        }
+
+        .temp {
+            font-size: 26px;
+            margin-left: 16px;
+        }
+    }
 
     .ceshi {
         width: 100vw;