| | |
| | | <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"> 26 ℃ </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"> 53 %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) || 0 }} |
| | | <span class="font16"> Kg </span> |
| | | </div> |
| | | <div class="stat_avg"> |
| | | <div> |
| | | 预计产量 |
| | | </div> |
| | | <div> |
| | | 2321kg |
| | | </div> |
| | | <div> 预计产量 </div> |
| | | <div> {{ totalYield?.toFixed(2) || 0 }} 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"> |
| | | 462 |
| | | <span class="font16"> |
| | | Kwh |
| | | </span> |
| | | </div> |
| | | {{ watt?.toFixed(2) || 0 }} |
| | | <span class="font16"> Kwh </span> |
| | | </div> |
| | | <div class="stat_avg"> |
| | | <div> |
| | | 平均电耗 |
| | | </div> |
| | | <div> |
| | | 13 Kwh/kg |
| | | </div> |
| | | <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"> |
| | | <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"> |
| | | 683 |
| | | <span class="font16"> |
| | | m³ |
| | | </span> |
| | | </div> |
| | | {{ steam?.toFixed(2) || 0 }} |
| | | <span class="font16"> m³ </span> |
| | | </div> |
| | | <div class="stat_avg"> |
| | | <div> |
| | | 平均汽耗 |
| | | </div> |
| | | <div> |
| | | 23 m³ |
| | | </div> |
| | | <div> 平均汽耗 </div> |
| | | <div> {{steamAvg?.toFixed(2) || 0}} m³/kg </div> |
| | | </div> |
| | | </div> |
| | | </dv-border-box7> |
| | |
| | | </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"> |
| | |
| | | |
| | | </div> --> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | <!-- <div style="padding-right: 100px;"> |
| | | <div class="statistics"> |
| | |
| | | |
| | | </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 }"> |
| | |
| | | :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 |
| | | ><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> |
| | |
| | | <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"> |
| | |
| | | <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"> |
| | |
| | | <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div> |
| | | <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div> |
| | | </div> |
| | | |
| | | |
| | | <Progress |
| | | :stroke-color="{ |
| | | from: '#108ee9', |
| | |
| | | /> |
| | | <!-- <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 |
| | | ><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> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="footer"> |
| | | |
| | | <div >{{ nowDate }}</div> |
| | | <div >{{ nowTime }}</div> |
| | | <div>{{ nowDate }}</div> |
| | | <div>{{ nowTime }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | 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() |
| | | console.log(userStore.dictItems.title) |
| | | userStore.dictItems.title?.forEach(element => { |
| | | if (element.value === "bigscreentitle") { |
| | | 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) => { |
| | | console.log(`output->result`, result) |
| | | // (`output->result`, result) |
| | | eqps.value = result |
| | | |
| | | result.forEach((item) => { |
| | |
| | | updateRealTime() |
| | | }) |
| | | .catch((err) => { |
| | | console.log(`output->err`, err) |
| | | // console.log(`output->err`, err) |
| | | }) |
| | | } |
| | | |
| | | function updateRealTime() { |
| | | //console.log(`output->定时刷新数据`) |
| | | |
| | | queryWorkShopStatistics() |
| | | |
| | | eqps.value.forEach((item) => { |
| | | queryRealTime(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) => { |
| | | //console.log(`output->res`, 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) |
| | | } else { |
| | | res = { |
| | |
| | | }) |
| | | } |
| | | function gotoeqp(num) { |
| | | console.log('跳转机台',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()) |
| | | //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.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) |
| | | setInterval(getNowTime, 10000) |
| | | }) |
| | | |
| | | onUnmounted(() => { |
| | |
| | | } |
| | | |
| | | .eqp-title { |
| | | height: 125px; |
| | | height: 125px; |
| | | |
| | | width: 100%; |
| | | |
| | | padding: 10px 20px; |
| | | width: 100%; |
| | | |
| | | padding: 10px 20px; |
| | | } |
| | | |
| | | .eqp-name { |
| | |
| | | color: white; |
| | | margin-top: 6px; |
| | | justify-content: space-between; |
| | | display: flex; |
| | | display: flex; |
| | | } |
| | | |
| | | .eqp-name-down { |
| | |
| | | width: 110px; |
| | | margin-left: 200px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .temp { |
| | |
| | | .font { |
| | | line-height: 26px; |
| | | } |
| | | |
| | | |
| | | .footer { |
| | | height: 160px; |
| | |
| | | color: white; |
| | | line-height: 40px; |
| | | margin-top: -150px; |
| | | |
| | | } |
| | | :deep() .progress { |
| | | padding: 25px 25px; |
| | |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | |
| | | } |
| | | .stat_label { |
| | | width:45px |
| | | width: 45px; |
| | | } |
| | | |
| | | |
| | | .stat_value { |
| | | font-size: 32px |
| | | font-size: 28px; |
| | | } |
| | | |
| | | .herb_weight { |
| | |
| | | } |
| | | .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 { |
| | |
| | | } |
| | | |
| | | .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> |