From 4840673314921235a3abb6b2485383ff9c6fc72c Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期五, 08 八月 2025 16:18:08 +0800
Subject: [PATCH] refactor(dry): 调整车间大屏和机台大屏的尺寸，更换设备模型图片
---
src/views/dry/bigScreen/BigWorkShop-tjt.vue | 118 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 70 insertions(+), 48 deletions(-)
diff --git a/src/views/dry/bigScreen/BigWorkShop-tjt.vue b/src/views/dry/bigScreen/BigWorkShop-tjt.vue
index b80dbe9..edb0f51 100644
--- a/src/views/dry/bigScreen/BigWorkShop-tjt.vue
+++ b/src/views/dry/bigScreen/BigWorkShop-tjt.vue
@@ -16,16 +16,16 @@
</div>
<div class="body">
<div class="humiture">
- <div style="display: flex; width: 120px">
- <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />
-
- <div style="font-size: 20px; line-height: 26px"> {{ envTemp }} 鈩� </div>
- </div>
- <div style="display: flex">
- <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
-
- <div style="font-size: 20px; line-height: 26px"> {{ envHum }} %rh </div>
- </div>
+<!-- <div style="display: flex; width: 120px">-->
+<!-- <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />-->
+<!-- -->
+<!-- <div style="font-size: 20px; line-height: 26px"> {{ envTemp }} 鈩� </div>-->
+<!-- </div>-->
+<!-- <div style="display: flex">-->
+<!-- <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />-->
+<!-- -->
+<!-- <div style="font-size: 20px; line-height: 26px"> {{ envHum }} %rh </div>-->
+<!-- </div>-->
</div>
<div class="feed">
<div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between">
@@ -134,11 +134,11 @@
</div>
<div class="up">
<div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
- <div class="eqpInfoup" @click="gotoeqp(num - 1)">
+ <div class="eqpInfoup" @click="gotoeqp(num - 1 + (num == 3) * 1 + (num == 4) * 2 )">
<div class="eqp-title">
<div class="herb_weight">
- <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
- <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div>
+ <div>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.originWeight || 0 }} Kg</div>
</div>
<!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '棰勭暀' }}</div> -->
<!-- <div class="process"> </div> -->
@@ -147,7 +147,7 @@
from: '#108ee9',
to: '#87d068',
}"
- :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')"
+ :percent="parseFloat(realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.percent || '0')"
status="active"
trailColor="#2b2b2b2b"
:show-info="false"
@@ -155,15 +155,15 @@
<div class="eqp-timer">
<div
><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
- {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture?.toFixed(1) || '0' }} %
+ {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.trendVo?.moisture?.toFixed(1) || '0' }} %
</div>
<div
><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
- {{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} 鈩�
+ {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} 鈩�
</div>
<div
><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
- {{ realTime.get(eqpCodes[num - 1])?.totalRemain || 0 }} min
+ {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.totalRemain || 0 }} min
</div>
</div>
</div>
@@ -177,11 +177,11 @@
<div class="weight"
><div class="herb">
- {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
+ {{ showInfo(realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])) }}
</div></div
>
<div class="water">
- <div class="eqp_num">{{ num }}</div>
+ <div :class="{ eqp_num: 1 == 1, eqp_num_two: num === 2, eqp_num_three: num === 3, eqp_num_four: num === 4 }">{{ num + (num == 3) * 1 + (num == 4) * 2 }}</div>
<!-- <div class="temp">
<div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div>
<div class="font">
@@ -200,16 +200,16 @@
</div>
<div class="down">
<div v-for="num in eqpNum2" :key="num" :class="{ two: num === 1, three: num === 2, four_down: num === 3 }">
- <div class="eqpInfodown" @click="gotoeqp(num + 3)">
+ <div class="eqpInfodown" @click="gotoeqp(num - 2 * num + 3 * num)">
<!-- <div class="eqp-info-down">
<div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div>
</div>
<div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> -->
<div class="weight"
- ><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div
+ ><div class="herb">{{ showInfo(realTime.get(eqpCodes[num - 2 * num + 3 * num])) }}</div></div
>
<div class="water">
- <div class="eqp_num">{{ num - 2 * num + 3 * num + 1 }}</div>
+ <div :class="{eqp_num:1==1, eqp_num_down_one: num === 1, eqp_num_down_two: num === 2, eqp_num_down_three: num === 3}">{{ num - 2 * num + 3 * num + 1 }}</div>
<!-- <div class="temp">
<div style="line-height: 28px">
<Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
@@ -229,8 +229,8 @@
<div style="height: 40px"></div>
<div class="eqp-title">
<div class="herb_weight">
- <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div>
- <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
+ <div>{{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.originWeight || 0 }} Kg</div>
</div>
<Progress
@@ -238,7 +238,7 @@
from: '#108ee9',
to: '#87d068',
}"
- :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')"
+ :percent="parseFloat(realTime.get(eqpCodes[num - 2 * num + 3 * num])?.percent || '0')"
status="active"
trailColor="#2b2b2b2b"
:show-info="false"
@@ -247,18 +247,18 @@
<div class="eqp-timer">
<div
><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
- {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture?.toFixed(1) || '0' }} %
+ {{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.trendVo?.moisture?.toFixed(1) || '0' }} %
</div>
<div
><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
- {{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} 鈩�
+ {{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} 鈩�
</div>
<!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
{{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min
</div> -->
<div
><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
- {{ realTime.get(eqpCodes[num + 3])?.totalRemain || 0 }} min
+ {{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.totalRemain || 0 }} min
</div>
</div>
</div>
@@ -373,7 +373,7 @@
if (res && res.trendVo) {
res.tempValue = [res.windTemp, 100]
res.totalRemain = res.remain
- if (res.detailList && res.detailList.length > 0) {
+ if (res.detailList && res.detailList.length > 0 && res.remain > 0 && res.dryTime > 0) {
// 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級
res.totalRemain = res.remain - (res.dryTime - res.detailList[res.detailList.length - 1].totalTime)
} else {
@@ -437,17 +437,18 @@
<style scoped>
.fbg {
height: 1080px;
- width: 1920px;
+ width: 2048px;
background-image: url(/src/assets/images/dry/bg/bg5.png);
background-repeat: no-repeat;
+ background-size: 100%;
}
.bgImage {
height: 1080px;
- width: 1920px;
- background-image: url(/src/assets/images/dry/bg/223.png);
+ width: 2048px;
+ background-image: url(/src/assets/images/dry/bg/tjtbg@0.5x.png);
background-repeat: no-repeat;
background-size: 104%;
- background-position: 0px 257px;
+ background-position: 0px 233px;
}
.head {
@@ -493,8 +494,8 @@
justify-content: flex-start;
}
.down {
- padding-left: 554px;
- margin-top: -760px;
+ padding-left: 683px;
+ margin-top: -823px;
display: flex;
align-content: center;
@@ -509,8 +510,8 @@
}
.eqpInfodown {
- width: 300px;
- height: 430px;
+ width: 313px;
+ height: 490px;
position: relative;
display: flex;
flex-direction: column;
@@ -518,23 +519,23 @@
}
.one {
- margin: 278px 10px;
+ margin: 310px 52px;
}
.two {
- margin: 208px 23px;
+ margin: 248px -45px;
}
.three {
- margin: 110px 158px;
+ margin: 129px 222px;
}
.four {
- margin: 16px 10px;
+ margin: 3px 4px;
}
.four_down {
- margin: 4px 74px;
+ margin: -3px 17px;
}
.eqp-title {
@@ -584,7 +585,7 @@
.weight {
flex: 1;
display: flex;
- margin-left: 46px;
+ margin-left: 36px;
font-size: 20px;
}
@@ -604,7 +605,7 @@
.water {
height: 120px;
width: 110px;
- margin: 58px 158px;
+ margin: 69px 178px;
display: flex;
flex-wrap: wrap;
}
@@ -662,17 +663,38 @@
}
.eqp_num {
font-weight: bold;
- width: 40px;
- height: 40px;
+ width: 35px;
+ height: 35px;
background: #a0782e;
border-radius: 50px;
/* text-align: center; */
- font-size: 23px;
+ font-size: 18px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
+ .eqp_num_two {
+ margin-left: -6px;
+ }
+
+ .eqp_num_three {
+ margin-left: -7px;
+ }
+
+ .eqp_num_four {
+ margin-left: -8px;
+ }
+
+ .eqp_num_down_one {
+ margin: -53px -82px;
+ }
+ .eqp_num_down_two {
+ margin: -54px -71px;
+ }
+ .eqp_num_down_three {
+ margin: -55px -85px;
+ }
.putincolor {
color: antiquewhite;
@@ -724,7 +746,7 @@
content: "";
position: absolute;
left: 99px;
- top: 57%;
+ top: 59%;
width: 128px;
height: 6px;
background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
--
Gitblit v1.9.3