From a3e955e801044d8abc2ec575cdf74a6815b8d963 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期四, 11 九月 2025 15:30:36 +0800
Subject: [PATCH] 优化配方维护功能-增加简写首字母自动填充，优化车间大屏和设备大屏界面
---
src/views/dry/bigScreen/BigWorkShop-tjt.vue | 218 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 125 insertions(+), 93 deletions(-)
diff --git a/src/views/dry/bigScreen/BigWorkShop-tjt.vue b/src/views/dry/bigScreen/BigWorkShop-tjt.vue
index edb0f51..7c8c9e5 100644
--- a/src/views/dry/bigScreen/BigWorkShop-tjt.vue
+++ b/src/views/dry/bigScreen/BigWorkShop-tjt.vue
@@ -16,21 +16,21 @@
</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">
+ <div style="width: 800px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between">
<div style="display: flex; flex-wrap: wrap; justify-content: space-between">
- <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
+ <dv-border-box7 class="toptip">
<div class="statistics putincolor">
<div class="stat_label font16"> 鎬绘姇鏂欓噺 </div>
<div class="stat_value">
@@ -43,7 +43,7 @@
</div>
</div>
</dv-border-box7>
- <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
+ <dv-border-box7 class="toptip">
<div class="statistics putincolor">
<div class="stat_label font16"> 鐢甸噺娑堣�� </div>
<div class="stat_value">
@@ -56,7 +56,7 @@
</div>
</div>
</dv-border-box7>
- <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
+ <dv-border-box7 class="toptip">
<div class="statistics putincolor">
<div class="stat_label font16"> 钂告苯娑堣�� </div>
<div class="stat_value">
@@ -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 + (num == 3) * 1 + (num == 4) * 2 )">
+ <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 + (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>{{ 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 + (num == 3) * 1 + (num == 4) * 2 ])?.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 + (num == 3) * 1 + (num == 4) * 2 ])?.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 + (num == 3) * 1 + (num == 4) * 2 ])?.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 + (num == 3) * 1 + (num == 4) * 2 ])?.totalRemain || 0 }} min
+ {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])?.totalRemain || 0 }} min
</div>
</div>
</div>
@@ -181,7 +181,9 @@
</div></div
>
<div class="water">
- <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="{ 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">
@@ -209,7 +211,9 @@
><div class="herb">{{ showInfo(realTime.get(eqpCodes[num - 2 * num + 3 * num])) }}</div></div
>
<div class="water">
- <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="{ 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" />
@@ -397,6 +401,7 @@
}
function gotoeqp(num) {
console.log('璺宠浆鏈哄彴', num)
+ console.log('璺宠浆鏈哄彴', eqpCodes.value)
if (num < eqpCodes.value.length) {
router.push({ path: '/bigEqp', query: { num: num } })
}
@@ -421,14 +426,32 @@
return data ? (data.fault ? data.fault : data.warning ? data.warning : data.level ? data.level : '绌洪棽') : '绌洪棽'
}
+ function handleKeyDown(event) {
+ // 闃绘榛樿琛屼负
+ event.preventDefault()
+ console.log('handleKeyDown', event.key)
+ if (event.key === 'Tab') {
+ // 鐩戝惉鍒板彸绠ご閿寜涓嬫椂锛屾墽琛岃烦杞�昏緫
+ gotoeqp(0)
+ // eqpNum.value++
+ // if (eqpNum.value > eqpCodes.value.length) {
+ // eqpNum.value = 1
+ // }
+ }
+ }
+
getNowTime()
listAllEqp()
onMounted(() => {
+ // 娣诲姞閿洏浜嬩欢鐩戝惉鍣�
+ window.addEventListener('keydown', handleKeyDown)
Timer.value = setInterval(updateRealTime, 3000)
setInterval(getNowTime, 10000)
})
onUnmounted(() => {
+ // 绉婚櫎閿洏浜嬩欢鐩戝惉鍣�
+ window.removeEventListener('keydown', handleKeyDown)
clearInterval(Timer.value)
Timer.value = null
})
@@ -440,7 +463,7 @@
width: 2048px;
background-image: url(/src/assets/images/dry/bg/bg5.png);
background-repeat: no-repeat;
- background-size: 100%;
+ background-size: 100%;
}
.bgImage {
height: 1080px;
@@ -461,12 +484,12 @@
height: 980px;
width: 100%;
margin-top: -100px;
- font-size: 20px;
+ font-size: 24px;
}
.title {
height: 200px;
padding: 20px;
- font-size: 30px;
+ font-size: 36px;
font-weight: bold;
text-align: center;
color: white;
@@ -495,43 +518,43 @@
}
.down {
padding-left: 683px;
- margin-top: -823px;
+ margin-top: -730px;
display: flex;
align-content: center;
justify-content: flex-start;
}
.eqpInfoup {
- width: 304px;
+ width: 340px;
height: 400px;
- position: relative;
+ position: relative;
display: flex;
flex-direction: column;
}
.eqpInfodown {
- width: 313px;
+ width: 340px;
height: 490px;
- position: relative;
+ position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.one {
- margin: 310px 52px;
+ margin: 280px 45px;
}
.two {
- margin: 248px -45px;
+ margin: 218px -45px;
}
.three {
- margin: 129px 222px;
+ margin: 99px 222px;
}
.four {
- margin: 3px 4px;
+ margin: -27px 4px;
}
.four_down {
@@ -543,7 +566,7 @@
width: 100%;
- padding: 10px 20px;
+ padding: 10px 10px;
}
.eqp-name {
@@ -578,15 +601,15 @@
.eqp-info-up {
flex: 1;
- padding-top: 108px;
+ padding-top: 140px;
display: flex;
}
.weight {
flex: 1;
display: flex;
- margin-left: 36px;
- font-size: 20px;
+ margin-left: 45px;
+ font-size: 24px;
}
.eqp-info-down {
@@ -621,7 +644,7 @@
height: 160px;
display: flex;
padding: 10px 20px;
- font-size: 30px;
+ font-size: 36px;
flex-direction: column-reverse;
align-items: flex-end;
color: white;
@@ -652,7 +675,7 @@
}
.stat_value {
- font-size: 28px;
+ font-size: 33px;
}
.herb_weight {
@@ -668,33 +691,33 @@
background: #a0782e;
border-radius: 50px;
/* text-align: center; */
- font-size: 18px;
+ font-size: 22px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
- .eqp_num_two {
- margin-left: -6px;
- }
+ .eqp_num_two {
+ margin-left: -6px;
+ }
- .eqp_num_three {
- margin-left: -7px;
- }
+ .eqp_num_three {
+ margin-left: -7px;
+ }
- .eqp_num_four {
- margin-left: -8px;
- }
+ .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;
- }
+ .eqp_num_down_one {
+ margin: -53px -82px;
+ }
+ .eqp_num_down_two {
+ margin: -54px -71px;
+ }
+ .eqp_num_down_three {
+ margin: -55px -85px;
+ }
.putincolor {
color: antiquewhite;
@@ -708,51 +731,60 @@
color: sandybrown;
}
.font16 {
- font-size: 16px;
+ font-size: 20px;
}
.stat_avg {
width: 100%;
- font-size: 16px;
+ font-size: 20px;
display: flex;
color: rgb(176, 176, 176);
justify-content: space-between;
border-top: 1px solid;
margin-top: 6px;
}
- @keyframes flowLight {
- 0% { background-position: 200% 0; }
- 100% { background-position: -200% 0; }
- }
- @keyframes flowLightUp {
- 0% { background-position: -200% 0; }
- 100% { background-position: 200% 0; }
- }
+ @keyframes flowLight {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+ }
+ @keyframes flowLightUp {
+ 0% {
+ background-position: -200% 0;
+ }
+ 100% {
+ background-position: 200% 0;
+ }
+ }
.up .eqp-title::after {
- content: "";
- position: absolute;
- left: 90px;
- top: 34%;
- width: 65px;
- height: 6px;
- background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
- transform: rotate(105deg) translateY(-107%);
+ content: '';
+ position: absolute;
+ left: 90px;
+ top: 39%;
+ width: 65px;
+ height: 6px;
+ background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
+ transform: rotate(105deg) translateY(-107%);
- background-size: 200% 100%;
- animation: flowLightUp 10s infinite linear;
-
+ background-size: 200% 100%;
+ animation: flowLightUp 10s infinite linear;
}
- .down .eqp-title::after {
- content: "";
- position: absolute;
- left: 99px;
- top: 59%;
- width: 128px;
- height: 6px;
- background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
- transform: rotate(105deg) translateY(-107%);
- background-size: 200% 100%;
- animation: flowLight 15s infinite linear;
+ .down .eqp-title::after {
+ content: '';
+ position: absolute;
+ left: 99px;
+ top: 59%;
+ width: 128px;
+ height: 6px;
+ background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
+ transform: rotate(105deg) translateY(-107%);
+ background-size: 200% 100%;
+ animation: flowLight 15s infinite linear;
+ }
+ .toptip {
+ width: 250px; height: 120px; padding: 10px;
}
-
</style>
--
Gitblit v1.9.3