From 6313e591d3854b57ae9d217dd7c91e21a568e578 Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期三, 06 十二月 2023 08:55:48 +0800 Subject: [PATCH] 车间大屏增加统计数据 --- src/views/dry/bigScreen/BigWorkShop.vue | 280 ++++++++++++++++++++++++++----------------------------- 1 files changed, 134 insertions(+), 146 deletions(-) diff --git a/src/views/dry/bigScreen/BigWorkShop.vue b/src/views/dry/bigScreen/BigWorkShop.vue index c5c59a1..1d764c7 100644 --- a/src/views/dry/bigScreen/BigWorkShop.vue +++ b/src/views/dry/bigScreen/BigWorkShop.vue @@ -19,78 +19,53 @@ <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 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 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="display: flex; flex-wrap: wrap; justify-content: space-between;"> - <dv-border-box7 style="width: 210px; height: 100px; padding:10px"> + <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_label font16"> 鎬绘姇鏂欓噺 </div> <div class="stat_value"> - 5066 - <span class="font16"> - Kg - </span> - </div> + {{ originWeight.toFixed(2) }} + <span class="font16"> Kg </span> + </div> <div class="stat_avg"> - <div> - 棰勮浜ч噺 - </div> - <div> - 2321kg - </div> + <div> 棰勮浜ч噺 </div> + <div> {{ totalYield.toFixed(2) }} kg </div> </div> </div> </dv-border-box7> - <dv-border-box7 style="width: 210px; height: 100px; padding:10px"> + <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> <div class="statistics putincolor"> - <div class="stat_label font16"> - 鐢甸噺娑堣�� - </div> + <div class="stat_label font16"> 鐢甸噺娑堣�� </div> <div class="stat_value"> - {{dianneng.toFixed(2)}} - <span class="font16"> - Kwh - </span> - </div> + {{ watt.toFixed(2) }} + <span class="font16"> Kwh </span> + </div> <div class="stat_avg"> - <div> - 骞冲潎鐢佃�� - </div> - <div> - 13 Kwh/kg - </div> + <div> 骞冲潎鐢佃�� </div> + <div> {{wattAvg.toFixed(2)}} Kwh/kg </div> </div> </div> </dv-border-box7> - <dv-border-box7 style="width: 210px; height: 100px; padding:10px"> + <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> <div class="statistics putincolor"> - <div class="stat_label font16"> - 钂告苯娑堣�� - </div> + <div class="stat_label font16"> 钂告苯娑堣�� </div> <div class="stat_value"> - {{zhengqi.toFixed(2)}} - <span class="font16"> - m鲁 - </span> - </div> + {{ steam.toFixed(2) }} + <span class="font16"> m鲁 </span> + </div> <div class="stat_avg"> - <div> - 骞冲潎姹借�� - </div> - <div> - 23 m鲁 - </div> + <div> 骞冲潎姹借�� </div> + <div> {{steamAvg.toFixed(2)}} m鲁 </div> </div> </div> </dv-border-box7> @@ -104,9 +79,9 @@ </div> </div> --> </div> - + <div> - <!-- <div class="statistics electroncolor"> + <!-- <div class="statistics electroncolor"> <div class="stat_label font16">鐢甸噺娑堣��</div> <div class="stat_value">500</div> <div class="font16"> @@ -144,8 +119,6 @@ </div> --> </div> - - </div> <!-- <div style="padding-right: 100px;"> <div class="statistics"> @@ -158,8 +131,6 @@ </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 }"> @@ -182,14 +153,17 @@ :show-info="false" /> <div class="eqp-timer"> - <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> + <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 + ><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 + <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> @@ -198,13 +172,14 @@ <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</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"> - {{ showInfo(realTime.get(eqpCodes[num - 1])) }} - </div></div> + <div class="weight" + ><div class="herb"> + {{ showInfo(realTime.get(eqpCodes[num - 1])) }} + </div></div + > <div class="water"> <div class="eqp_num">{{ num }}</div> <!-- <div class="temp"> @@ -230,7 +205,9 @@ <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="weight" + ><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div + > <div class="water"> <div class="eqp_num">{{ num + 4 }}</div> <!-- <div class="temp"> @@ -255,7 +232,7 @@ <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div> <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div> </div> - + <Progress :stroke-color="{ from: '#108ee9', @@ -268,17 +245,20 @@ /> <!-- <div class="eqp-name">50%</div> --> <div class="eqp-timer"> - <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> + <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 + ><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 + ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> + {{ realTime.get(eqpCodes[num + 3])?.totalRemain || 0 }} min </div> </div> </div> @@ -287,9 +267,8 @@ </div> <div class="footer"> - - <div >{{ nowDate }}</div> - <div >{{ nowTime }}</div> + <div>{{ nowDate }}</div> + <div>{{ nowTime }}</div> </div> </div> </div> @@ -310,28 +289,29 @@ 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 title = ref('鍏版郸鏅鸿兘骞茬嚗杞﹂棿') const userStore = useUserStore() - const envHum = ref(); - const envTemp = ref(); - const zhengqi = ref(); - const dianneng = ref() + const envHum = ref(0) + const envTemp = ref(0) + const originWeight = ref(0) + const totalYield = ref(0) + const dryReduce = ref(0) + const steam = ref(0) + const watt = ref(0) - const steam = ref(); - const watt = ref() + const steamAvg = ref(0) + const wattAvg = ref(0) console.log(userStore.dictItems.title) - userStore.dictItems.title?.forEach(element => { - if (element.value === "bigscreentitle") { + userStore.dictItems.title?.forEach((element) => { + if (element.value === 'bigscreentitle') { title.value = element.text } - - }); + }) const Timer = ref() const realTime = ref(new Map()) const nowTime = ref() const nowDate = ref() - function listAllEqp() { listAll({ enable: 'Y' }) @@ -351,51 +331,49 @@ function updateRealTime() { //console.log(`output->瀹氭椂鍒锋柊鏁版嵁`) - zhengqi.value = 0; - dianneng.value = 0 - new Promise(async function(resolve){ + queryWorkShopStatistics() - await eqps.value.forEach(async (item) => { - await queryRealTime(item) - }) - resolve() - - console.log("鎵ц瀹屾垚"); - }).then(()=>{ - console.log("then:::::" + dianneng.value,zhengqi.value ); - - steam.value = zhengqi.value - watt.value = dianneng.value + eqps.value.forEach((item) => { + queryRealTime(item) }) - - } - async function queryRealTime(eqp: dryEquipment) { - console.log("sdkfjlasjdflkajsldfjlsd") + function queryWorkShopStatistics() { + let tenantId = userStore.getTenant + defHttp.get({ url: '/dry/real/workshopStatistics', params: { tenantid: tenantId } }).then((res) => { + console.log(`output->res`, res) + steam.value = res.steam + watt.value = res.watt + envHum.value = res.envHum + envTemp.value = res.envTemp + originWeight.value = res.originWeight + totalYield.value = res.yield + dryReduce.value = res.reduce + if(res.reduce > 0) { + steamAvg.value = res.steam/res.reduce + wattAvg.value = res.watt/res.reduce + } + }) + } + + function queryRealTime(eqp: dryEquipment) { let tenantId = userStore.getTenant let eqpCode = eqp.code let queryRealTimeUrl = '/dry/real/getRealTimeData' - await defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then( async (res) => { - console.log(`output->res`, res) + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { if (res && res.trendVo) { res.tempValue = [res.windTemp, 100] res.totalRemain = res.remain if (res.detailList) { - // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級 - res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime) + // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級 + res.totalRemain = res.remain - (res.dryTime - res.detailList[res.detailList.length - 1].totalTime) } - if(res.totalRemain < 0) { + if (res.totalRemain < 0) { res.totalRemain = 0 } - + res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2) - envHum.value = res.envHum - envTemp.value = res.envTemp - zhengqi.value += res.steam - dianneng.value += res.watt - console.log("zhengqi:::" , res.steam); } else { res = { tempValue: [0, 100], @@ -408,7 +386,7 @@ }) } function gotoeqp(num) { - console.log('璺宠浆鏈哄彴',num); + console.log('璺宠浆鏈哄彴', num) if (num < eqpCodes.value.length) { router.push({ path: '/bigEqp', query: { num: num } }) } @@ -416,20 +394,28 @@ function getNowTime() { var date = new Date() - 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("鑾峰彇褰撳墠鏃堕棿锛�"); + 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()) } function showInfo(data) { - return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'绌洪棽':'绌洪棽' + return data ? (data.fault ? data.fault : data.warning ? data.warning : data.level ? data.level : '绌洪棽') : '绌洪棽' } getNowTime() listAllEqp() onMounted(() => { Timer.value = setInterval(updateRealTime, 3000) - setInterval(getNowTime,10000) + setInterval(getNowTime, 10000) }) onUnmounted(() => { @@ -541,11 +527,11 @@ } .eqp-title { - height: 125px; + height: 125px; - width: 100%; - - padding: 10px 20px; + width: 100%; + + padding: 10px 20px; } .eqp-name { @@ -561,7 +547,7 @@ color: white; margin-top: 6px; justify-content: space-between; - display: flex; + display: flex; } .eqp-name-down { @@ -608,7 +594,7 @@ width: 110px; margin-left: 200px; display: flex; - flex-wrap: wrap; + flex-wrap: wrap; } .temp { @@ -617,7 +603,6 @@ .font { line-height: 26px; } - .footer { height: 160px; @@ -629,7 +614,6 @@ color: white; line-height: 40px; margin-top: -150px; - } :deep() .progress { padding: 25px 25px; @@ -649,14 +633,13 @@ align-items: center; justify-content: space-between; flex-wrap: wrap; - } .stat_label { - width:45px + width: 45px; } - + .stat_value { - font-size: 28px + font-size: 28px; } .herb_weight { @@ -667,16 +650,16 @@ } .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; + 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 { @@ -688,13 +671,18 @@ } .steamcolor { - color: sandybrown + 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; + 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