布局和页面渲染修改

src/App.vue

@@ -107,7 +107,12 @@
                                 </div>
                             </div>
                         </div>
-                        <div v-for="(item, index) in i.middleVos" :key="index" class="Freezer_leftleaninglist">
+                        <div
+                            v-if="i && i.middleVos && i.middleVos.length > 0"
+                            v-for="(item, index) in i.middleVos"
+                            :key="index"
+                            class="Freezer_leftleaninglist"
+                        >
                             <div class="Freezer_leftleaninglistboxs">
                                 <div
                                     v-for="(items, indexs) in item.home"
@@ -148,17 +153,13 @@
                             </div>
                         </div>
                     </div>
-                    <!-- <div v-if="i.openingdegreerightData.length > 0" class="Freezer_rightleaning">
-                        <div
-                            v-for="(item, index) in i.openingdegreerightData"
-                            :key="index"
-                            class="Freezer_rightleaninglist"
-                        >
+                    <div v-if="i && i.branchLines && i.branchLines.length > 0" class="Freezer_rightleaning">
+                        <div v-for="(item, index) in i.branchLines" :key="index" class="Freezer_rightleaninglist">
                             <div>
-                                {{ item.name }}: <span>{{ item.value }}%</span>
+                                {{ item.name }}: <span>{{ item.value.toFixed(3) }}%</span>
                             </div>
                         </div>
-                    </div> -->
+                    </div>
                     <div class="Freezer_right">
                         <div v-for="(item, index) in i.temperatures" :key="index" class="Freezer_rightlist">
                             <div class="Freezer_rightlist_title">{{ item.name }}</div>
@@ -269,9 +270,9 @@ const handleMqttMessage = (topic: string, message: any) => {
     // 假设消息内容是一个 JSON 字符串
     try {
         const data = JSON.parse(message.toString());
-        console.log(topic, data);
         coalgasData.value = data.top;
         Datalist.value = data.buttom;
+        // console.log(topic, Datalist.value);
     } catch (error) {
         console.error('解析消息失败:', error);
     }
@@ -288,7 +289,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
             return;
         }
         event.preventDefault(); // 阻止默认行为
-        console.log('Opening modal...'); // 添加调试信息
+        // console.log('Opening modal...'); // 添加调试信息
         falog.value = true; // 直接设置 falog 为 true
     }
 };
@@ -557,7 +558,7 @@ body {
                                 display: inline-block;
                                 display: flex;
                                 align-items: center;
-                                font-size: 1.1rem;
+                                font-size: 1rem;
                                 padding-left: 1rem;
                                 div {
                                     padding-left: 0.5rem;
@@ -588,14 +589,17 @@ body {
                             display: flex;
                             flex-wrap: wrap;
                             align-items: center;
+                            .Freezer_leftleaninglist_list:nth-child(2n + 1) {
+                                padding-left: 3%;
+                            }
                             .Freezer_leftleaninglist_list {
                                 display: flex;
                                 width: 50%;
                                 height: 50%;
-                                padding-left: 3%;
+                                // padding-left: ;
                                 box-sizing: border-box;
                                 div {
-                                    padding-left: 0.5rem;
+                                    padding-left: 0.3rem;
                                     color: #41ffbf;
                                 }
                             }