<template>
|
<dv-full-screen-container>
|
<div class="fbg">
|
<div class="bgImage">
|
<div class="head">
|
<div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div>
|
|
<div class="title">
|
<span>{{ title }}</span>
|
|
<dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" />
|
</div>
|
<div style="width: 600px; height: 50px; display: flex; justify-content: end">
|
<dv-decoration-8 :reverse="true" style="width: 500px; height: 50px"
|
/></div>
|
</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>
|
<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">
|
{{ originWeight?.toFixed(2) || 0 }}
|
<span class="font16"> Kg </span>
|
</div>
|
<div class="stat_avg">
|
<div> 预计产量 </div>
|
<div> {{ totalYield?.toFixed(2) || 0 }} 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">
|
{{ watt?.toFixed(2) || 0 }}
|
<span class="font16"> Kwh </span>
|
</div>
|
<div class="stat_avg">
|
<div> 平均电耗 </div>
|
<div> {{wattAvg?.toFixed(2) || 0}} 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">
|
{{ steam?.toFixed(2) || 0 }}
|
<span class="font16"> m³ </span>
|
</div>
|
<div class="stat_avg">
|
<div> 平均汽耗 </div>
|
<div> {{steamAvg?.toFixed(2) || 0}} m³/kg </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="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="{
|
from: '#108ee9',
|
to: '#87d068',
|
}"
|
:percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')"
|
status="active"
|
trailColor="#2b2b2b2b"
|
:show-info="false"
|
/>
|
<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' }} %
|
</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
|
</div>
|
</div>
|
</div>
|
<div class="eqp-info-up">
|
<!-- <div class="herb">
|
<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="water">
|
<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> %
|
</div>
|
</div>
|
<div class="temp">
|
<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> ℃
|
</div>
|
</div> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
<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="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="water">
|
<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>
|
<div class="font">
|
<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: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
|
<div class="font">
|
<span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> ℃
|
</div>
|
</div> -->
|
</div>
|
|
<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>
|
|
<Progress
|
:stroke-color="{
|
from: '#108ee9',
|
to: '#87d068',
|
}"
|
:percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')"
|
status="active"
|
trailColor="#2b2b2b2b"
|
:show-info="false"
|
/>
|
<!-- <div class="eqp-name">50%</div> -->
|
<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' }} %
|
</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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="footer">
|
<div>{{ nowDate }}</div>
|
<div>{{ nowTime }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</dv-full-screen-container>
|
</template>
|
|
<script setup lang="ts">
|
import { Progress } from 'ant-design-vue'
|
import { onMounted, ref, onUnmounted } from 'vue'
|
import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
|
import { listAll } from '../api/DryEquipment.api'
|
import { dryEquipment } from '../dataDefine/DryEquipment.data'
|
import { router } from '/@/router'
|
import { defHttp } from '/@/utils/http/axios'
|
import { useUserStore } from '/@/store/modules/user'
|
const eqpNum = ref(4)
|
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()
|
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 steamAvg = ref(0)
|
const wattAvg = ref(0)
|
// 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())
|
const nowTime = ref()
|
const nowDate = ref()
|
|
function listAllEqp() {
|
listAll({ enable: 'Y' })
|
.then((result) => {
|
// (`output->result`, result)
|
eqps.value = result
|
|
result.forEach((item) => {
|
eqpMap.value.set(item.code, item)
|
})
|
updateRealTime()
|
})
|
.catch((err) => {
|
// console.log(`output->err`, err)
|
})
|
}
|
|
function updateRealTime() {
|
//console.log(`output->定时刷新数据`)
|
|
queryWorkShopStatistics()
|
|
eqps.value.forEach((item) => {
|
queryRealTime(item)
|
})
|
}
|
|
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'
|
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)
|
}
|
if (res.totalRemain < 0) {
|
res.totalRemain = 0
|
}
|
|
res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
|
} else {
|
res = {
|
tempValue: [0, 100],
|
percent: 0,
|
mois: [],
|
}
|
}
|
|
realTime.value.set(eqp.code, res)
|
})
|
}
|
function gotoeqp(num) {
|
//console.log('跳转机台', num)
|
if (num < eqpCodes.value.length) {
|
router.push({ path: '/bigEqp', query: { num: num } })
|
}
|
}
|
|
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())
|
}
|
|
function showInfo(data) {
|
return data ? (data.fault ? data.fault : data.warning ? data.warning : data.orderStatus ? covertStatus(data.orderStatus+'') : '空闲') : '空闲'
|
}
|
|
function covertStatus(status){
|
//console.log('status',status)
|
switch (status) {
|
case '0':
|
return '准备阶段'
|
case '1':
|
return '上料阶段'
|
case '2':
|
return '干燥阶段'
|
case '3':
|
return '暂停'
|
case '4':
|
return '干燥完成'
|
|
}
|
}
|
console.log("router-param", router.currentRoute.value.params.tenant);
|
getNowTime()
|
listAllEqp()
|
onMounted(() => {
|
Timer.value = setInterval(updateRealTime, 3000)
|
setInterval(getNowTime, 10000)
|
})
|
|
onUnmounted(() => {
|
clearInterval(Timer.value)
|
Timer.value = null
|
})
|
</script>
|
|
<style scoped>
|
.fbg {
|
height: 1080px;
|
width: 1920px;
|
background-image: url(/src/assets/images/dry/bg/bg5.png);
|
background-repeat: no-repeat;
|
}
|
.bgImage {
|
height: 1080px;
|
width: 1920px;
|
background-image: url(/src/assets/images/dry/bg/wksp2.png);
|
background-repeat: no-repeat;
|
background-size: 100%;
|
background-position: 0px 50px;
|
}
|
|
.head {
|
display: flex;
|
align-content: center;
|
justify-content: center;
|
}
|
|
.body {
|
height: 980px;
|
width: 100%;
|
margin-top: -100px;
|
font-size: 20px;
|
}
|
.title {
|
height: 200px;
|
padding: 20px;
|
font-size: 30px;
|
font-weight: bold;
|
text-align: center;
|
color: white;
|
}
|
|
.humiture {
|
height: 0px;
|
justify-content: center;
|
color: white;
|
display: flex;
|
}
|
|
.feed {
|
display: flex;
|
height: 0px;
|
color: gray;
|
padding-top: 20px;
|
justify-content: space-between;
|
}
|
|
.up {
|
padding-left: 110px;
|
padding-top: 00px;
|
display: flex;
|
|
align-content: center;
|
justify-content: flex-start;
|
}
|
.down {
|
padding-left: 402px;
|
margin-top: -367px;
|
display: flex;
|
|
align-content: center;
|
justify-content: flex-start;
|
}
|
.eqpInfoup {
|
width: 300px;
|
height: 400px;
|
margin: -50px 31px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.eqpInfodown {
|
width: 300px;
|
height: 430px;
|
margin: 0 31px;
|
padding-top: 132px;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
}
|
|
.one {
|
margin-top: 278px;
|
}
|
|
.two {
|
margin-top: 219px;
|
}
|
|
.three {
|
margin-top: 160px;
|
}
|
|
.four {
|
margin-top: 101px;
|
}
|
|
.eqp-title {
|
height: 125px;
|
|
width: 100%;
|
|
padding: 10px 20px;
|
}
|
|
.eqp-name {
|
line-height: 30px;
|
text-align: center;
|
color: white;
|
margin-top: -30px;
|
}
|
|
.eqp-timer {
|
line-height: 30px;
|
text-align: center;
|
color: white;
|
margin-top: 6px;
|
justify-content: space-between;
|
display: flex;
|
}
|
|
.eqp-name-down {
|
line-height: 40px;
|
text-align: center;
|
color: white;
|
}
|
|
.process {
|
width: 50%;
|
height: 100%;
|
overflow: hidden;
|
border-radius: 20px;
|
background: #3f4c6b;
|
}
|
|
.eqp-info-up {
|
flex: 1;
|
padding-top: 108px;
|
display: flex;
|
}
|
|
.weight {
|
flex: 1;
|
display: flex;
|
font-size: 20px;
|
}
|
|
.eqp-info-down {
|
flex: 1;
|
padding-top: 70px;
|
display: flex;
|
}
|
|
.herb {
|
height: 32px;
|
background: #3f4c6b;
|
color: white;
|
line-height: 30px;
|
padding: 0 10px;
|
}
|
.water {
|
height: 120px;
|
width: 110px;
|
margin-left: 200px;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.temp {
|
display: flex;
|
}
|
.font {
|
line-height: 26px;
|
}
|
|
.footer {
|
height: 160px;
|
display: flex;
|
padding: 10px 20px;
|
font-size: 30px;
|
flex-direction: column-reverse;
|
align-items: flex-end;
|
color: white;
|
line-height: 40px;
|
margin-top: -150px;
|
}
|
:deep() .progress {
|
padding: 25px 25px;
|
|
width: 360px;
|
display: flex;
|
}
|
:deep() .ant-progress-bg {
|
height: 25px !important;
|
}
|
: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: 28px;
|
}
|
|
.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>
|
