From 5bec62ee89b4beb9d631670fe436fd3de2887317 Mon Sep 17 00:00:00 2001
From: bsw215583320 <baoshiwei121@163.com>
Date: 星期六, 05 八月 2023 09:34:44 +0800
Subject: [PATCH] 优化车间大屏和机台大屏
---
src/views/dry/bigScreen/BigWorkShop.vue | 91 ++++++++++++++++++++++++++++++++++-----------
src/views/dry/monitor/WorkShop.vue | 4 +-
src/views/dry/bigScreen/BigEqp.vue | 9 +++-
src/views/dry/monitor/Eqp.vue | 6 +-
4 files changed, 79 insertions(+), 31 deletions(-)
diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue
index c609eae..aa27b60 100644
--- a/src/views/dry/bigScreen/BigEqp.vue
+++ b/src/views/dry/bigScreen/BigEqp.vue
@@ -27,7 +27,7 @@
</div>
<div class="formula">
<div class="formulaItem">
- <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
+ <Icon style="color: powderblue" icon="la:box" :size="38" />
<div>
<div class="mainInfo2">{{ realData?.feed }} 绛�</div>
<div class="subhead2">鎶曟枡閲�</div>
@@ -154,7 +154,7 @@
<div class="chartTittle">瀹炴椂杩涘害</div>
<div id="efficiencyLine" style="width: 848px; height: 180px; margin-top: -10px"></div>
<div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
- <div style="width: 100px; height: 20px">0 min</div>
+ <div style="width: 100px; height: 20px">{{ realData.dryTime | 0 }} min</div>
<div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
</div>
<div id="progressBar" style="width: 848px; height: 80px"></div>
@@ -1434,7 +1434,10 @@
}
// ganZaoXiaoLv.push([totalTime + res.remain,standard.value.xiaolv])
-
+ // console.log(`output->res.remain`, res.remain)
+ // console.log(`output->res.dryTime`, res.dryTime)
+ // console.log(`output->totalTime`, totalTime)
+ // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級
res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
progressSeries.push({
name: '鍓╀綑',
diff --git a/src/views/dry/bigScreen/BigWorkShop.vue b/src/views/dry/bigScreen/BigWorkShop.vue
index 902e6c9..18fea0f 100644
--- a/src/views/dry/bigScreen/BigWorkShop.vue
+++ b/src/views/dry/bigScreen/BigWorkShop.vue
@@ -17,12 +17,12 @@
<div class="body">
<div class="humiture">
<div style="display: flex; width: 120px">
- <Icon style="color: #f7b733" icon="solar:temperature-line-duotone" :size="28" />
+ <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />
<div style="font-size: 20px; line-height: 26px"> 26 鈩� </div>
</div>
<div style="display: flex">
- <Icon style="color: #f7b733" icon="material-symbols:humidity-percentage-outline" :size="28" />
+ <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
<div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
</div>
@@ -43,22 +43,34 @@
trailColor="#2b2b2b2b"
:show-info="false"
/>
- <!-- <div class="eqp-name">50%</div> -->
+ <div class="eqp-timer">
+ <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
+ {{realTime.get(eqpCodes[num - 1])?.dryTime || 0}} min
+ </div>
+ <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
+ {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
+ </div>
+ </div>
</div>
<div class="eqp-info-up">
- <div class="herb">{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+ <div class="herb">
+ <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+ <!-- <div>33 Kg</div> -->
+ </div>
+
</div>
+ <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div>
<div class="water">
<div class="temp">
- <div style="line-height: 28px"><Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" /> </div>
+ <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div>
<div class="font">
- <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo.moisture || '0' }}</span> %
+ <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture || '0' }}</span> %
</div>
</div>
<div class="temp">
- <div style="line-height: 28px"><Icon style="color: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
+ <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
<div class="font">
- <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo.bellowsTemp || '0' }} </span> 鈩�
+ <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> 鈩�
</div>
</div>
</div>
@@ -71,26 +83,28 @@
<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="water">
<div class="temp">
<div style="line-height: 28px">
- <Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" />
+ <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
</div>
<div class="font">
- <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo.moisture || '0' }}</span> %
+ <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture || '0' }}</span> %
</div>
</div>
<div class="temp">
- <div style="line-height: 28px"><Icon style="color: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
+ <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
<div class="font">
- <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo.bellowsTemp || '0' }}</span> 鈩�
+ <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> 鈩�
</div>
</div>
</div>
- <div style="height: 70px"></div>
+ <div style="height: 50px"></div>
<div class="eqp-title">
- <!-- <div class="process"> </div> -->
+ <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '棰勭暀' }}</div>
+
<Progress
:stroke-color="{
from: '#108ee9',
@@ -102,7 +116,14 @@
:show-info="false"
/>
<!-- <div class="eqp-name">50%</div> -->
- <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '棰勭暀' }}</div>
+ <div class="eqp-timer">
+ <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
+ </div>
+ </div>
</div>
</div>
</div>
@@ -124,7 +145,7 @@
import { useUserStore } from '/@/store/modules/user'
const eqpNum = ref(4)
const eqpMap = ref(new Map())
- const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006'])
+ const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008'])
const eqps = ref([] as dryEquipment[])
const userStore = useUserStore()
@@ -163,7 +184,16 @@
//console.log(`output->res`, res)
if (res && res.trendVo) {
res.tempValue = [res.windTemp, 100]
- res.percent = ((res.dryTime / (res.dryTime + res.remain)) * 100).toFixed(2)
+ res.totalRemain = res.remain
+ if (res.detailList) {
+ // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級
+ res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime)
+ }
+ if(res.totalRemain < 0) {
+ res.totalRemain = 0
+ }
+
+ res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
} else {
res = {
tempValue: [0, 100],
@@ -254,15 +284,15 @@
}
.eqpInfoup {
width: 280px;
- height: 300px;
- margin: 0 41px;
+ height: 315px;
+ margin: -20px 41px;
display: flex;
flex-direction: column;
}
.eqpInfodown {
width: 280px;
- height: 300px;
+ height: 315px;
margin: 0 41px;
display: flex;
flex-direction: column;
@@ -286,7 +316,7 @@
}
.eqp-title {
- height: 30px;
+ height: 45px;
border-radius: 20px;
/* background: rgb(182, 182, 182);
border: 1px solid green; */
@@ -298,6 +328,15 @@
text-align: center;
color: white;
margin-top: -30px;
+ }
+
+ .eqp-timer {
+ line-height: 30px;
+ text-align: center;
+ color: white;
+ margin-top: 6px;
+ justify-content: space-around;
+ display: flex;
}
.eqp-name-down {
@@ -320,9 +359,15 @@
display: flex;
}
+ .weight {
+ flex: 1;
+ display: flex;
+ font-size: 16px;
+ }
+
.eqp-info-down {
flex: 1;
- padding-top: 50px;
+ padding-top: 70px;
display: flex;
}
@@ -361,6 +406,6 @@
height: 25px !important;
}
:deep() .ant-progress-inner {
- background-color: rgb(197 197 197 / 52%) !important;
+ background-color: rgb(197 197 197 / 84%) !important;
}
</style>
diff --git a/src/views/dry/monitor/Eqp.vue b/src/views/dry/monitor/Eqp.vue
index 461bb0e..2660e45 100644
--- a/src/views/dry/monitor/Eqp.vue
+++ b/src/views/dry/monitor/Eqp.vue
@@ -21,7 +21,7 @@
</div>
<div class="formula">
<div class="formulaItem">
- <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
+ <Icon style="color: powderblue" icon="la:box" :size="35" />
<div>
<div class="mainInfo2">{{ realData?.feed }}绛�</div>
<div class="subhead2">鎶曟枡閲�</div>
@@ -40,7 +40,7 @@
<div class="mainInfo2">{{ realData?.target }}%</div>
<div class="subhead2">鐩爣</div>
</div>
- </div>
+ </div>
</div>
<!-- <div class="eqpName">{{ realData?.herbName }}</div>
<div class="eqpName">{{ realData?.feed }} 绛�</div> -->
@@ -151,7 +151,7 @@
<div class="chartTittle">瀹炴椂杩涘害</div>
<div id="efficiencyLine" style="width: 780px; height: 130px; margin-top: -10px"></div>
<div style="height: 10px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
- <div style="width: 100px; height: 20px">0 min</div>
+ <div style="width: 100px; height: 20px">{{ realData.dryTime | 0 }} min</div>
<div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
</div>
<div id="progressBar" style="width: 780px; height: 80px"></div>
diff --git a/src/views/dry/monitor/WorkShop.vue b/src/views/dry/monitor/WorkShop.vue
index b361f6a..5d7f2c1 100644
--- a/src/views/dry/monitor/WorkShop.vue
+++ b/src/views/dry/monitor/WorkShop.vue
@@ -86,7 +86,7 @@
vertical
/>
<div class="info-text"
- >鐑锛�<span>{{ realTime.get(item.id)?.windTemp | 0 }}</span> 掳C</div
+ >鐑锛�<span>{{ realTime.get(item.id)?.trendVo?.bellowsTemp | 0 }}</span> 掳C</div
>
</div>
</div>
@@ -387,7 +387,7 @@
defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
console.log(`output->res`, res)
if (res && res.trendVo) {
- res.tempValue = [res.windTemp, 100]
+ res.tempValue = [res.trendVo.bellowsTemp, 100]
res.percent = ((res.dryTime / (res.dryTime + res.remain)) * 100).toFixed(2)
res.mois = [
(res.trendVo.moisture / 100).toFixed(2),
--
Gitblit v1.9.3