|
|
@@ -1,10 +1,9 @@
|
|
|
<template>
|
|
|
<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 class="top1_boxs_left"></div> -->
|
|
|
- <div class="top1_boxs_right">
|
|
|
+ <div class="large_title">四烧解冻库</div>
|
|
|
+ <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,32 @@
|
|
|
</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="top1_boxs2">
|
|
|
+ <div v-if="topDtata3 && topDtata3.length > 0" class="top1_boxs_left">
|
|
|
+ <div v-for="(item, index) in topDtata3" :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 v-if="topDtata4 && topDtata4.length > 0" class="top1_boxs_right">
|
|
|
+ <div v-for="(item, index) in topDtata4" :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">
|
|
|
@@ -51,8 +76,22 @@
|
|
|
v-if="
|
|
|
item['4'].circulatingAir2 &&
|
|
|
item['4'].furnaceAir2 &&
|
|
|
+ item['4'].circulatingAir3 &&
|
|
|
+ item['4'].furnaceAir3 &&
|
|
|
+ item['4'].circulatingAir4 &&
|
|
|
+ item['4'].furnaceAir4 &&
|
|
|
+ item['4'].circulatingAir5 &&
|
|
|
+ item['4'].furnaceAir5 &&
|
|
|
+ item['4'].circulatingAir5 &&
|
|
|
+ item['4'].furnaceAir6 &&
|
|
|
item['4'].circulatingAir1 &&
|
|
|
- item['4'].furnaceAir1
|
|
|
+ item['4'].furnaceAir1 &&
|
|
|
+ item['4'].out1 &&
|
|
|
+ item['4'].out2 &&
|
|
|
+ item['4'].out3 &&
|
|
|
+ item['4'].out4 &&
|
|
|
+ item['4'].out5 &&
|
|
|
+ item['4'].out6
|
|
|
"
|
|
|
class="border_boxs_left_top1_boxs_left4"
|
|
|
>
|
|
|
@@ -75,6 +114,13 @@
|
|
|
{{ item['4'].circulatingAir1.name ? item['4'].circulatingAir1.name : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="out1_boxs">
|
|
|
+ <div class="furnaceAir_name">{{ item['4'].out1.name }}</div>
|
|
|
+ <div class="furnaceAir_value">
|
|
|
+ {{ item['4'].out1.value.toFixed(1) }}
|
|
|
+ {{ item['4'].out1.unit ? item['4'].out1.unit : '' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="circulatingAirandfurnaceAir_boxs2">
|
|
|
<div class="furnaceAir_boxs">
|
|
|
@@ -95,6 +141,13 @@
|
|
|
{{ item['4'].circulatingAir2.name ? item['4'].circulatingAir2.name : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="out1_boxs">
|
|
|
+ <div class="furnaceAir_name">{{ item['4'].out2.name }}</div>
|
|
|
+ <div class="furnaceAir_value">
|
|
|
+ {{ item['4'].out2.value.toFixed(1) }}
|
|
|
+ {{ item['4'].out2.unit ? item['4'].out2.unit : '' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="circulatingAirandfurnaceAir_boxs3">
|
|
|
<div class="furnaceAir_boxs">
|
|
|
@@ -115,6 +168,13 @@
|
|
|
{{ item['4'].circulatingAir3.name ? item['4'].circulatingAir3.name : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="out1_boxs">
|
|
|
+ <div class="furnaceAir_name">{{ item['4'].out3.name }}</div>
|
|
|
+ <div class="furnaceAir_value">
|
|
|
+ {{ item['4'].out3.value.toFixed(1) }}
|
|
|
+ {{ item['4'].out3.unit ? item['4'].out3.unit : '' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="circulatingAirandfurnaceAir_boxs4">
|
|
|
<div class="circulatingAir_boxs">
|
|
|
@@ -135,6 +195,13 @@
|
|
|
{{ item['4'].furnaceAir4.name ? item['4'].furnaceAir4.name : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="out1_boxs">
|
|
|
+ <div class="furnaceAir_name">{{ item['4'].out4.name }}</div>
|
|
|
+ <div class="furnaceAir_value">
|
|
|
+ {{ item['4'].out4.value.toFixed(1) }}
|
|
|
+ {{ item['4'].out4.unit ? item['4'].out4.unit : '' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="circulatingAirandfurnaceAir_boxs5">
|
|
|
<div class="circulatingAir_boxs">
|
|
|
@@ -155,6 +222,13 @@
|
|
|
{{ item['4'].furnaceAir3.name ? item['4'].furnaceAir3.name : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="out1_boxs">
|
|
|
+ <div class="furnaceAir_name">{{ item['4'].out5.name }}</div>
|
|
|
+ <div class="furnaceAir_value">
|
|
|
+ {{ item['4'].out5.value.toFixed(1) }}
|
|
|
+ {{ item['4'].out5.unit ? item['4'].out5.unit : '' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="circulatingAirandfurnaceAir_boxs6">
|
|
|
<div class="circulatingAir_boxs">
|
|
|
@@ -175,6 +249,13 @@
|
|
|
{{ item['4'].furnaceAir4.name ? item['4'].furnaceAir4.name : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="out1_boxs">
|
|
|
+ <div class="furnaceAir_name">{{ item['4'].out6.name }}</div>
|
|
|
+ <div class="furnaceAir_value">
|
|
|
+ {{ item['4'].out6.value.toFixed(1) }}
|
|
|
+ {{ item['4'].out6.unit ? item['4'].out6.unit : '' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="item['5'] && item['5'].length > 0" class="border_boxs_left_top1_boxs_left2">
|
|
|
@@ -242,6 +323,9 @@ import { TioWs, IHandler } from '@/utils/websockets';
|
|
|
|
|
|
const log = ref('');
|
|
|
const topDtata1 = ref<any[]>([]);
|
|
|
+const topDtata2 = ref<any[]>([]);
|
|
|
+const topDtata3 = ref<any[]>([]);
|
|
|
+const topDtata4 = ref<any[]>([]);
|
|
|
const leftData1 = ref<any[]>([]);
|
|
|
const rightData = ref<any[]>([]);
|
|
|
|
|
|
@@ -261,11 +345,17 @@ const handler: IHandler = {
|
|
|
const messageData = JSON.parse(event.data);
|
|
|
console.log('接收到消息', messageData);
|
|
|
topDtata1.value = [];
|
|
|
+ topDtata2.value = [];
|
|
|
+ topDtata3.value = [];
|
|
|
+ topDtata4.value = [];
|
|
|
leftData1.value = [];
|
|
|
rightData.value = [];
|
|
|
// 更新数据
|
|
|
if (messageData) {
|
|
|
- topDtata1.value = messageData.top;
|
|
|
+ topDtata1.value = messageData.top1.left;
|
|
|
+ topDtata2.value = messageData.top1.right;
|
|
|
+ topDtata3.value = messageData.top2.left;
|
|
|
+ topDtata4.value = messageData.top2.right;
|
|
|
leftData1.value.push(messageData.left);
|
|
|
rightData.value = messageData.right;
|
|
|
console.log('接收到非数组JSON消息', leftData1.value);
|
|
|
@@ -395,6 +485,27 @@ body {
|
|
|
line-height: 3.6rem;
|
|
|
}
|
|
|
.top1_boxs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 1rem;
|
|
|
+ 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: 29rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top1_boxs2 {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 7rem;
|
|
|
@@ -402,17 +513,17 @@ body {
|
|
|
height: 3.5rem;
|
|
|
display: flex;
|
|
|
padding: 0 4.5rem;
|
|
|
- // .top1_boxs_left {
|
|
|
- // width: 50%;
|
|
|
- // height: 100%;
|
|
|
- // display: flex;
|
|
|
- // }
|
|
|
+ .top1_boxs_left {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
.top1_boxs_right {
|
|
|
width: 50%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
- padding-right: 29rem;
|
|
|
+ // padding-right: 29rem;
|
|
|
}
|
|
|
}
|
|
|
.border_boxs {
|
|
|
@@ -583,7 +694,7 @@ body {
|
|
|
}
|
|
|
}
|
|
|
.border_boxs_left_top1_boxs_left2 {
|
|
|
- width: 5.8rem;
|
|
|
+ width: 6.7rem;
|
|
|
height: 100%;
|
|
|
font-size: 0.9rem;
|
|
|
text-align: center;
|
|
|
@@ -603,8 +714,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;
|
|
|
@@ -619,7 +734,7 @@ body {
|
|
|
}
|
|
|
.border_boxs_left_top1_boxs_left3 {
|
|
|
border-right: #00befe 0rem solid;
|
|
|
- width: 6rem;
|
|
|
+ width: 6.7rem;
|
|
|
height: 100%;
|
|
|
font-size: 0.9rem;
|
|
|
text-align: center;
|
|
|
@@ -638,8 +753,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;
|
|
|
@@ -687,6 +806,15 @@ body {
|
|
|
color: #41ffbf;
|
|
|
}
|
|
|
}
|
|
|
+ .out1_boxs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 1rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ .furnaceAir_value {
|
|
|
+ color: #41ffbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.circulatingAirandfurnaceAir_boxs2 {
|
|
|
// position: absolute;
|
|
|
@@ -726,6 +854,15 @@ body {
|
|
|
// left: 4.5rem;
|
|
|
}
|
|
|
}
|
|
|
+ .out1_boxs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0.5rem;
|
|
|
+ bottom: 1rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ .furnaceAir_value {
|
|
|
+ color: #41ffbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.circulatingAirandfurnaceAir_boxs3 {
|
|
|
// position: absolute;
|
|
|
@@ -756,6 +893,15 @@ body {
|
|
|
color: #41ffbf;
|
|
|
}
|
|
|
}
|
|
|
+ .out1_boxs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0.5rem;
|
|
|
+ bottom: 1rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ .furnaceAir_value {
|
|
|
+ color: #41ffbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.circulatingAirandfurnaceAir_boxs4 {
|
|
|
// position: absolute;
|
|
|
@@ -795,6 +941,15 @@ body {
|
|
|
// left: 4.5rem;
|
|
|
}
|
|
|
}
|
|
|
+ .out1_boxs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 1rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ .furnaceAir_value {
|
|
|
+ color: #41ffbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.circulatingAirandfurnaceAir_boxs5 {
|
|
|
// position: absolute;
|
|
|
@@ -825,6 +980,15 @@ body {
|
|
|
color: #41ffbf;
|
|
|
}
|
|
|
}
|
|
|
+ .out1_boxs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 1rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ .furnaceAir_value {
|
|
|
+ color: #41ffbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.circulatingAirandfurnaceAir_boxs6 {
|
|
|
// position: absolute;
|
|
|
@@ -864,6 +1028,15 @@ body {
|
|
|
// left: 4.5rem;
|
|
|
}
|
|
|
}
|
|
|
+ .out1_boxs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 1rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ .furnaceAir_value {
|
|
|
+ color: #41ffbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.border_boxs_left_top1_boxs_left8 {
|
|
|
@@ -1025,8 +1198,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;
|
|
|
@@ -1068,8 +1245,12 @@ body {
|
|
|
font-size: 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;
|
|
|
@@ -1085,8 +1266,12 @@ body {
|
|
|
font-size: 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;
|
LiuShu_0203