From e90b860aaa30bb3e5486618b447589eee75ff6ec Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期二, 07 十一月 2023 12:37:38 +0800
Subject: [PATCH] 机台监控和车间大屏优化
---
src/views/dry/bigScreen/BigWorkShop.vue | 325 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 279 insertions(+), 46 deletions(-)
diff --git a/src/views/dry/bigScreen/BigWorkShop.vue b/src/views/dry/bigScreen/BigWorkShop.vue
index af6143f..9c9db95 100644
--- a/src/views/dry/bigScreen/BigWorkShop.vue
+++ b/src/views/dry/bigScreen/BigWorkShop.vue
@@ -6,7 +6,7 @@
<div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div>
<div class="title">
- <span>鍏版郸鏅鸿兘骞茬嚗杞﹂棿</span>
+ <span>{{ title }}</span>
<dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" />
</div>
@@ -27,11 +27,149 @@
<div style="font-size: 20px; line-height: 26px"> 53 %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="display: flex; flex-wrap: wrap; justify-content: space-between;">
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 鎬绘姇鏂欓噺
+ </div>
+ <div class="stat_value">
+ 5066
+ <span class="font16">
+ Kg
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 棰勮浜ч噺
+ </div>
+ <div>
+ 2321kg
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 鐢甸噺娑堣��
+ </div>
+ <div class="stat_value">
+ 462
+ <span class="font16">
+ Kwh
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 骞冲潎鐢佃��
+ </div>
+ <div>
+ 13 Kwh/kg
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 钂告苯娑堣��
+ </div>
+ <div class="stat_value">
+ 683
+ <span class="font16">
+ m鲁
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 骞冲潎姹借��
+ </div>
+ <div>
+ 23 m鲁
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <!-- <div class="statistics putincolor">
+ <div class="stat_label font16">棰勮浜ч噺</div>
+ <div class="stat_value">3000</div>
+
+ <div class="font16">
+ <br/>
+ Kg
+ </div>
+ </div> -->
+ </div>
+
+ <div>
+ <!-- <div class="statistics electroncolor">
+ <div class="stat_label font16">鐢甸噺娑堣��</div>
+ <div class="stat_value">500</div>
+ <div class="font16">
+ <br/>
+ Kwh
+ </div>
+
+ </div>
+ <div class="statistics steamcolor">
+ <div class="stat_label font16">钂告苯娑堣��</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ m鲁
+ </div>
+
+ </div>
+
+ <div class="statistics electroncolor">
+ <div class="stat_label font16">骞冲潎鐢佃��</div>
+ <div class="stat_value">12</div>
+ <div class="font16">
+ <br/>
+ Kwh/kg
+ </div>
+
+ </div>
+ <div class="statistics steamcolor">
+ <div class="stat_label font16">骞冲潎姹借��</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ m鲁/kg
+ </div>
+
+ </div> -->
+ </div>
+
+
+ </div>
+ <!-- <div style="padding-right: 100px;">
+ <div class="statistics">
+ <div class="stat_label font16">骞叉枡浜ч噺</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ kg
+ </div>
+
+ </div>
+ </div> -->
+
+
+ </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="eqp-title">
- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '棰勭暀' }}</div>
+ <div class="herb_weight">
+ <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div>
+ </div>
+ <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '棰勭暀' }}</div> -->
<!-- <div class="process"> </div> -->
<Progress
:stroke-color="{
@@ -44,8 +182,11 @@
:show-info="false"
/>
<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><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
+ {{ realTime.get(eqpCodes[num - 1])?.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'}} 鈩�
</div>
<div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
{{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
@@ -53,15 +194,20 @@
</div>
</div>
<div class="eqp-info-up">
- <div class="herb">
+ <!-- <div class="herb">
<div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
- <!-- <div>33 Kg</div> -->
- </div>
+
+ </div> -->
</div>
- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div>
+ <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> -->
+
+ <div class="weight"><div class="herb">
+ {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
+ </div></div>
<div class="water">
- <div class="temp">
+ <div class="eqp_num">{{ num }}</div>
+ <!-- <div class="temp">
<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> %
@@ -72,7 +218,7 @@
<div class="font">
<span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> 鈩�
</div>
- </div>
+ </div> -->
</div>
</div>
</div>
@@ -80,12 +226,14 @@
<div class="down">
<div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
<div class="eqpInfodown" @click="gotoeqp(num + 3)">
- <div class="eqp-info-down">
+ <!-- <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">{{ 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="water">
- <div class="temp">
+ <div class="eqp_num">{{ num + 4 }}</div>
+ <!-- <div class="temp">
<div style="line-height: 28px">
<Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
</div>
@@ -98,12 +246,15 @@
<div class="font">
<span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> 鈩�
</div>
- </div>
+ </div> -->
</div>
- <div style="height: 50px"></div>
+ <div style="height: 40px"></div>
<div class="eqp-title">
- <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '棰勭暀' }}</div>
+ <div class="herb_weight">
+ <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
+ </div>
<Progress
:stroke-color="{
@@ -117,9 +268,15 @@
/>
<!-- <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 + 3])?.dryTime || 0}} min
+ <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
+ {{ realTime.get(eqpCodes[num + 3])?.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'}} 鈩�
+ </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
</div>
@@ -130,7 +287,7 @@
</div>
<div class="footer">
- <div >{{ nowDate }}</div>
+ <div >{{ nowDate }}</div>
<div >{{ nowTime }}</div>
</div>
</div>
@@ -152,8 +309,15 @@
const eqpMap = ref(new Map())
const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008'])
const eqps = ref([] as dryEquipment[])
-
+ const title = ref("鍏版郸鏅鸿兘骞茬嚗杞﹂棿")
const userStore = useUserStore()
+ console.log(userStore.dictItems.title)
+ userStore.dictItems.title?.forEach(element => {
+ if (element.value === "bigscreentitle") {
+ title.value = element.text
+ }
+
+ });
const Timer = ref()
const realTime = ref(new Map())
@@ -164,7 +328,7 @@
function listAllEqp() {
listAll({ enable: 'Y' })
.then((result) => {
- //console.log(`output->result`, result)
+ console.log(`output->result`, result)
eqps.value = result
result.forEach((item) => {
@@ -185,6 +349,7 @@
}
function queryRealTime(eqp: dryEquipment) {
+
let tenantId = userStore.getTenant
let eqpCode = eqp.code
let queryRealTimeUrl = '/dry/real/getRealTimeData'
@@ -214,6 +379,7 @@
})
}
function gotoeqp(num) {
+ console.log('璺宠浆鏈哄彴',num);
if (num < eqpCodes.value.length) {
router.push({ path: '/bigEqp', query: { num: num } })
}
@@ -224,6 +390,10 @@
nowDate.value = (date.getFullYear()) + "/" + (date.getMonth()< 9? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "/" + (date.getDay() < 10? "0" + date.getDay() : date.getDay())
nowTime.value = "" + (date.getHours()<10? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes()< 10? "0" + date.getMinutes(): date.getMinutes())
//console.log("鑾峰彇褰撳墠鏃堕棿锛�");
+ }
+
+ function showInfo(data) {
+ return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'绌洪棽':'绌洪棽'
}
getNowTime()
@@ -252,7 +422,7 @@
background-image: url(/src/assets/images/dry/bg/wksp2.png);
background-repeat: no-repeat;
background-size: 100%;
- background-position: 0% 50%;
+ background-position: 0px 50px;
}
.head {
@@ -283,8 +453,16 @@
display: flex;
}
+ .feed {
+ display: flex;
+ height: 0px;
+ color: gray;
+ padding-top: 20px;
+ justify-content: space-between;
+ }
+
.up {
- padding-left: 100px;
+ padding-left: 110px;
padding-top: 00px;
display: flex;
@@ -292,36 +470,37 @@
justify-content: flex-start;
}
.down {
- padding-left: 392px;
- margin-top: -334px;
+ padding-left: 402px;
+ margin-top: -367px;
display: flex;
align-content: center;
justify-content: flex-start;
}
.eqpInfoup {
- width: 280px;
- height: 315px;
- margin: -20px 41px;
+ width: 300px;
+ height: 400px;
+ margin: -50px 31px;
display: flex;
flex-direction: column;
}
.eqpInfodown {
- width: 280px;
- height: 315px;
- margin: 0 41px;
+ width: 300px;
+ height: 430px;
+ margin: 0 31px;
+ padding-top: 132px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.one {
- margin-top: 280px;
+ margin-top: 278px;
}
.two {
- margin-top: 220px;
+ margin-top: 219px;
}
.three {
@@ -329,15 +508,15 @@
}
.four {
- margin-top: 100px;
+ margin-top: 101px;
}
.eqp-title {
- height: 45px;
- border-radius: 20px;
- /* background: rgb(182, 182, 182);
- border: 1px solid green; */
- width: 100%;
+ height: 125px;
+
+ width: 100%;
+
+ padding: 10px 20px;
}
.eqp-name {
@@ -352,7 +531,7 @@
text-align: center;
color: white;
margin-top: 6px;
- justify-content: space-around;
+ justify-content: space-between;
display: flex;
}
@@ -372,14 +551,14 @@
.eqp-info-up {
flex: 1;
- padding-top: 120px;
+ padding-top: 108px;
display: flex;
}
.weight {
flex: 1;
display: flex;
- font-size: 16px;
+ font-size: 20px;
}
.eqp-info-down {
@@ -389,7 +568,7 @@
}
.herb {
- height: 30px;
+ height: 32px;
background: #3f4c6b;
color: white;
line-height: 30px;
@@ -398,10 +577,9 @@
.water {
height: 120px;
width: 110px;
- margin-left: 170px;
+ margin-left: 200px;
display: flex;
- flex-wrap: wrap;
- align-content: space-evenly;
+ flex-wrap: wrap;
}
.temp {
@@ -421,6 +599,7 @@
align-items: flex-end;
color: white;
line-height: 40px;
+ margin-top: -150px;
}
:deep() .progress {
@@ -435,4 +614,58 @@
:deep() .ant-progress-inner {
background-color: rgb(197 197 197 / 84%) !important;
}
+
+ .statistics {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ }
+ .stat_label {
+ width:45px
+ }
+
+ .stat_value {
+ font-size: 32px
+ }
+
+ .herb_weight {
+ padding: 0 10px;
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ }
+ .eqp_num {
+ font-weight: bold;
+ width: 40px;
+ height: 40px;
+ background: #a0782e;
+ border-radius: 50px;
+ /* text-align: center; */
+ font-size: 23px;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .putincolor {
+ color: antiquewhite;
+ }
+
+ .electroncolor {
+ color: aquamarine;
+ }
+
+ .steamcolor {
+ color: sandybrown
+ }
+ .font16 {
+ font-size: 16px;
+ }
+ .stat_avg {
+ width: 100%; font-size: 16px; display: flex; color: rgb(176, 176, 176); justify-content: space-between; border-top: 1px solid;
+ margin-top: 6px;
+ }
</style>
--
Gitblit v1.9.3