添加字段

src/App.vue

@@ -2,7 +2,7 @@
     <div class="screen-root">
         <div id="screen" class="screen">
             <div class="large_title">二烧解冻库</div>
-            <!-- <div v-if="topDtata1 && topDtata1.length > 0" class="top1_boxs">
+            <div v-if="topDtata1 && topDtata1.length > 0" class="top1_boxs">
                 <div class="top1_boxs_left"></div>
                 <div class="top1_boxs_right">
                     <div v-for="(item, index) in topDtata1" :key="index" class="public_boxs">
@@ -12,7 +12,7 @@
                         </div>
                     </div>
                 </div>
-            </div> -->
+            </div>
             <div class="border_boxs">
                 <div class="border_boxs_left">
                     <div v-if="leftData1 && leftData1.length > 0" class="border_boxs_left_top1">
@@ -225,7 +225,7 @@ import { onMounted, onUnmounted, onBeforeUnmount, ref } from 'vue';
 import { TioWs, IHandler } from '@/utils/websockets';
 
 const log = ref('');
-// const topDtata1 = ref<any[]>([]);
+const topDtata1 = ref<any[]>([]);
 const leftData1 = ref<any[]>([]);
 const rightData = ref<any[]>([]);
 
@@ -244,12 +244,12 @@ const handler: IHandler = {
                 // 解析事件数据
                 const messageData = JSON.parse(event.data);
                 console.log('接收到消息', messageData);
-                // topDtata1.value = [];
+                topDtata1.value = [];
                 leftData1.value = [];
                 rightData.value = [];
                 // 更新数据
                 if (messageData) {
-                    // topDtata1.value = messageData.top;
+                    topDtata1.value = messageData.top;
                     leftData1.value.push(messageData.left);
                     rightData.value = messageData.right;
                     console.log('接收到非数组JSON消息', leftData1.value);
@@ -378,27 +378,27 @@ body {
         color: #00befe;
         line-height: 3.6rem;
     }
-    // .top1_boxs {
-    //     position: absolute;
-    //     left: 0;
-    //     top: 2rem;
-    //     width: 100%;
-    //     height: 3.5rem;
-    //     display: flex;
-    //     padding: 0 4.5rem;
-    //     .top1_boxs_left {
-    //         width: 50%;
-    //         height: 100%;
-    //         display: flex;
-    //     }
-    //     .top1_boxs_right {
-    //         width: 50%;
-    //         height: 100%;
-    //         display: flex;
-    //         justify-content: flex-end;
-    //         padding-right: 10rem;
-    //     }
-    // }
+    .top1_boxs {
+        position: absolute;
+        left: 2rem;
+        top: 0.5rem;
+        width: 100%;
+        height: 3.5rem;
+        display: flex;
+        padding: 0 4.5rem;
+        .top1_boxs_left {
+            width: 50%;
+            height: 100%;
+            display: flex;
+        }
+        .top1_boxs_right {
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-end;
+            padding-right: 10rem;
+        }
+    }
     .border_boxs {
         width: 100%;
         height: 44rem;
@@ -418,7 +418,7 @@ body {
                     width: 100%;
                     display: flex;
                     .border_boxs_left_top1_boxs_left {
-                        width: 6.4rem;
+                        width: 6.2rem;
                         height: 100%;
                         font-size: 1.1rem;
                         .public_boxs5:nth-child(1) {
@@ -488,7 +488,7 @@ body {
                         }
                     }
                     .border_boxs_left_top1_boxs_left2 {
-                        width: 5.8rem;
+                        width: 6.3rem;
                         height: 100%;
                         font-size: 0.9rem;
                         text-align: center;
@@ -508,8 +508,12 @@ body {
                                 font-size: 0.9rem;
                                 border-radius: 7px;
                                 border: 0.12rem solid #3da7ea;
-                                box-shadow: inset 0 0 0.5rem #3da7ea, inset 0 0 0.5rem #3490c9, inset 0 0 0.5rem #2e7cad,
-                                    inset 0 0 0.5rem #276287, inset 0 0 0.5rem #041844;
+                                box-shadow:
+                                    inset 0 0 0.5rem #3da7ea,
+                                    inset 0 0 0.5rem #3490c9,
+                                    inset 0 0 0.5rem #2e7cad,
+                                    inset 0 0 0.5rem #276287,
+                                    inset 0 0 0.5rem #041844;
                                 margin-top: 0.2rem;
                                 padding: 0.3rem 0.2rem;
                                 color: #41ffbf;
@@ -524,7 +528,7 @@ body {
                     }
                     .border_boxs_left_top1_boxs_left3 {
                         border-right: #00befe 0rem solid;
-                        width: 6rem;
+                        width: 6.3rem;
                         height: 100%;
                         font-size: 0.9rem;
                         text-align: center;
@@ -543,8 +547,12 @@ body {
                                 font-size: 0.9rem;
                                 border-radius: 7px;
                                 border: 0.12rem solid #3da7ea;
-                                box-shadow: inset 0 0 0.5rem #3da7ea, inset 0 0 0.5rem #3490c9, inset 0 0 0.5rem #2e7cad,
-                                    inset 0 0 0.5rem #276287, inset 0 0 0.5rem #041844;
+                                box-shadow:
+                                    inset 0 0 0.5rem #3da7ea,
+                                    inset 0 0 0.5rem #3490c9,
+                                    inset 0 0 0.5rem #2e7cad,
+                                    inset 0 0 0.5rem #276287,
+                                    inset 0 0 0.5rem #041844;
                                 margin-top: 0.2rem;
                                 padding: 0.3rem 0.2rem;
                                 color: #41ffbf;
@@ -558,7 +566,7 @@ body {
                         }
                     }
                     .border_boxs_left_top1_boxs_left4 {
-                        width: 24.5rem;
+                        width: 23.5rem;
                         height: 100%;
                         // display: flex;
                         padding: 0 0.3rem;
@@ -782,8 +790,12 @@ body {
             // background: rgba(107, 250, 162, 0.3);
             border-radius: 10px;
             border: 0.12rem solid #3da7ea;
-            box-shadow: inset 0 0 2rem #3da7ea, inset 0 0 0.5rem #3490c9, inset 0 0 0.5rem #2e7cad,
-                inset 0 0 0.5rem #276287, inset 0 0 0.5rem #041844;
+            box-shadow:
+                inset 0 0 2rem #3da7ea,
+                inset 0 0 0.5rem #3490c9,
+                inset 0 0 0.5rem #2e7cad,
+                inset 0 0 0.5rem #276287,
+                inset 0 0 0.5rem #041844;
             .border_boxs_right_data {
                 .border_boxs_right_data_title {
                     font-size: 1.4rem;
@@ -825,8 +837,12 @@ body {
         font-size: 1.1rem;
         border-radius: 7px;
         border: 0.12rem solid #3da7ea;
-        box-shadow: inset 0 0 0.5rem #3da7ea, inset 0 0 0.5rem #3490c9, inset 0 0 0.5rem #2e7cad,
-            inset 0 0 0.5rem #276287, inset 0 0 0.5rem #041844;
+        box-shadow:
+            inset 0 0 0.5rem #3da7ea,
+            inset 0 0 0.5rem #3490c9,
+            inset 0 0 0.5rem #2e7cad,
+            inset 0 0 0.5rem #276287,
+            inset 0 0 0.5rem #041844;
         margin-top: 0.2rem;
         padding: 0.3rem 1.7rem;
         color: #41ffbf;
@@ -842,8 +858,12 @@ body {
         font-size: 1.1rem;
         border-radius: 7px;
         border: 0.12rem solid #3da7ea;
-        box-shadow: inset 0 0 0.5rem #3da7ea, inset 0 0 0.5rem #3490c9, inset 0 0 0.5rem #2e7cad,
-            inset 0 0 0.5rem #276287, inset 0 0 0.5rem #041844;
+        box-shadow:
+            inset 0 0 0.5rem #3da7ea,
+            inset 0 0 0.5rem #3490c9,
+            inset 0 0 0.5rem #2e7cad,
+            inset 0 0 0.5rem #276287,
+            inset 0 0 0.5rem #041844;
         margin-top: 0.2rem;
         padding: 0.5rem 0.3rem;
         color: #41ffbf;