From 938348fc70fe2f2332793c7e9d66acf07691936a Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 08 九月 2025 15:06:25 +0800
Subject: [PATCH] feat(bigScreen): 添加键盘控制功能并优化界面显示
---
src/views/dry/bigScreen/BigEqp-tjt.vue | 52 +++++++++++-
src/views/dry/bigScreen/BigWorkShop-tjt.vue | 173 +++++++++++++++++++++++++------------------
2 files changed, 146 insertions(+), 79 deletions(-)
diff --git a/src/views/dry/bigScreen/BigEqp-tjt.vue b/src/views/dry/bigScreen/BigEqp-tjt.vue
index 1dc991d..120aea8 100644
--- a/src/views/dry/bigScreen/BigEqp-tjt.vue
+++ b/src/views/dry/bigScreen/BigEqp-tjt.vue
@@ -2190,15 +2190,53 @@
router.back()
}
+
+ function handleKeyDown(event) {
+ event.preventDefault()
+ if (event.key === 'ArrowUp') {
+ num--
+ if (num < 0) {
+ num = eqps.value.length
+ }
+ if (eqps.value.length > 0) {
+ var i = num % eqps.value.length
+ //eqp.value = eqps.value[i]
+ // console.log("777",i);
+ eqpNum.value = i
+ //console.log("888",eqp.value);
+ queryRealTime()
+ //setTimeout(initCharts, 500)
+ }
+ } else if (event.key === 'ArrowDown') {
+ num++
+ if (eqps.value.length > 0) {
+ var i = num % eqps.value.length
+ //eqp.value = eqps.value[i]
+ // console.log("777",i);
+ eqpNum.value = i
+ //console.log("888",eqp.value);
+ queryRealTime()
+ //setTimeout(initCharts, 500)
+ }
+ } else if (event.key === 'Tab') {
+ back();
+ }
+ }
listAllEqp()
//queryEqp()
// DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛�
onMounted(() => {
+ // 娣诲姞閿洏浜嬩欢鐩戝惉鍣�
+ window.addEventListener('keydown', handleKeyDown)
+ // 鑾峰彇鐒︾偣
+
Timer.value = setInterval(queryRealTime, 3000)
Timer2.value = setInterval(moveImage, 50)
})
onUnmounted(() => {
+ // 绉婚櫎閿洏浜嬩欢鐩戝惉鍣�
+ window.removeEventListener('keydown', handleKeyDown)
clearInterval(Timer.value)
clearInterval(Timer2.value)
Timer.value = null
@@ -2270,7 +2308,7 @@
color: white;
}
.subhead {
- color: #a19f9c;
+ color: #cdcdcd;
font-size: 16px;
padding-left: 10px;
}
@@ -2281,8 +2319,8 @@
font-size: 16px;
}
.subhead2 {
- color: #a19f9c;
- font-size: 10px;
+ color: #cdcdcd;
+ font-size: 12px;
padding-left: 0px;
}
.zhengqi {
@@ -2439,7 +2477,7 @@
.herbInfo {
width: 362px;
height: 440px;
- color: #727272;
+ color: #ffffff;
}
.curEqp {
@@ -2455,10 +2493,10 @@
height: 260px;
/* background: white;
border-radius: 10px; */
-
+ opacity: 0.7;
background-repeat: no-repeat;
- background-size: 200px;
- background-position: 0px 10px;
+ background-size: 120px;
+ background-position: 14px 10px;
}
.tempMoisChart {
width: 736px;
diff --git a/src/views/dry/bigScreen/BigWorkShop-tjt.vue b/src/views/dry/bigScreen/BigWorkShop-tjt.vue
index edb0f51..56464de 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 + (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;
@@ -504,7 +527,7 @@
.eqpInfoup {
width: 304px;
height: 400px;
- position: relative;
+ position: relative;
display: flex;
flex-direction: column;
}
@@ -512,7 +535,7 @@
.eqpInfodown {
width: 313px;
height: 490px;
- position: relative;
+ position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -674,27 +697,27 @@
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;
@@ -719,40 +742,46 @@
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: 34%;
+ 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;
+ }
</style>
--
Gitblit v1.9.3