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 | 242 +++++++++++++++++++++++++++++------------------
1 files changed, 148 insertions(+), 94 deletions(-)
diff --git a/src/views/dry/bigScreen/BigWorkShop-tjt.vue b/src/views/dry/bigScreen/BigWorkShop-tjt.vue
index b80dbe9..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)">
+ <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,13 @@
<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 +202,18 @@
</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 +233,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 +242,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 +251,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 +377,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 {
@@ -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
})
@@ -437,17 +460,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 {
@@ -460,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;
@@ -493,48 +517,48 @@
justify-content: flex-start;
}
.down {
- padding-left: 554px;
- margin-top: -760px;
+ padding-left: 683px;
+ 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: 300px;
- height: 430px;
- position: relative;
+ width: 340px;
+ height: 490px;
+ position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.one {
- margin: 278px 10px;
+ margin: 280px 45px;
}
.two {
- margin: 208px 23px;
+ margin: 218px -45px;
}
.three {
- margin: 110px 158px;
+ margin: 99px 222px;
}
.four {
- margin: 16px 10px;
+ margin: -27px 4px;
}
.four_down {
- margin: 4px 74px;
+ margin: -3px 17px;
}
.eqp-title {
@@ -542,7 +566,7 @@
width: 100%;
- padding: 10px 20px;
+ padding: 10px 10px;
}
.eqp-name {
@@ -577,15 +601,15 @@
.eqp-info-up {
flex: 1;
- padding-top: 108px;
+ padding-top: 140px;
display: flex;
}
.weight {
flex: 1;
display: flex;
- margin-left: 46px;
- font-size: 20px;
+ margin-left: 45px;
+ font-size: 24px;
}
.eqp-info-down {
@@ -604,7 +628,7 @@
.water {
height: 120px;
width: 110px;
- margin: 58px 158px;
+ margin: 69px 178px;
display: flex;
flex-wrap: wrap;
}
@@ -620,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;
@@ -651,7 +675,7 @@
}
.stat_value {
- font-size: 28px;
+ font-size: 33px;
}
.herb_weight {
@@ -662,16 +686,37 @@
}
.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: 22px;
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 {
@@ -686,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: 57%;
- 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