添加字段

src/App.vue

@@ -2,9 +2,8 @@
     <div class="screen-root">
         <div id="screen" class="screen">
             <div class="large_title">立山新库（北1）解冻库</div>
-            <div v-if="topDtata1 && topDtata1.length > 0" class="top1_boxs">
-                <div class="top1_boxs_left"></div>
-                <div class="top1_boxs_right">
+            <div class="top1_boxs">
+                <div v-if="topDtata1 && topDtata1.length > 0" class="top1_boxs_left">
                     <div v-for="(item, index) in topDtata1" :key="index" class="public_boxs">
                         <div class="public_boxs_name">{{ item.name ? item.name : '' }}</div>
                         <div v-if="item.value != null" class="public_boxs_value">
@@ -12,6 +11,14 @@
                         </div>
                     </div>
                 </div>
+                <div v-if="topDtata2 && topDtata2.length > 0" class="top1_boxs_right">
+                    <div v-for="(item, index) in topDtata2" :key="index" class="public_boxs">
+                        <div class="public_boxs_name">{{ item.name ? item.name : '' }}</div>
+                        <div v-if="item.value != null" class="public_boxs_value">
+                            {{ item.value.toFixed(1) }} {{ item.unit ? item.unit : '' }}
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="border_boxs">
                 <div class="border_boxs_left">
@@ -186,6 +193,7 @@ import { TioWs, IHandler } from '@/utils/websockets';
 
 const log = ref('');
 const topDtata1 = ref<any[]>([]);
+const topDtata2 = ref<any[]>([]);
 const leftData1 = ref<any[]>([]);
 const rightData = ref<any[]>([]);
 
@@ -205,11 +213,13 @@ const handler: IHandler = {
                 const messageData = JSON.parse(event.data);
                 console.log('接收到消息', messageData);
                 topDtata1.value = [];
+                topDtata2.value = [];
                 leftData1.value = [];
                 rightData.value = [];
                 // 更新数据
                 if (messageData) {
-                    topDtata1.value = messageData.top;
+                    topDtata1.value = messageData.top.left;
+                    topDtata2.value = messageData.top.right;
                     leftData1.value.push(messageData.left);
                     rightData.value = messageData.right;
                     console.log('接收到非数组JSON消息', topDtata1.value);
@@ -448,7 +458,7 @@ body {
                         }
                     }
                     .border_boxs_left_top1_boxs_left2 {
-                        width: 6rem;
+                        width: 6.1rem;
                         height: 100%;
                         font-size: 0.9rem;
                         text-align: center;
@@ -468,8 +478,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;
@@ -503,8 +517,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;
@@ -665,8 +683,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;
@@ -708,8 +730,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;
@@ -725,8 +751,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;