<template>
|
<div id="box">
|
<div class="container">
|
<div class="boxTop">
|
<div class="boxOrder">
|
<div>
|
<div style="margin-top: -10px">
|
<span>
|
<icon
|
name="align-left"
|
class="text-icon"
|
style="margin-left: 5px"
|
></icon>
|
</span>
|
<span class="fs-xl text mb-1 pl-3" style="font-size: 20px;font-weight: bold;"
|
>工单信息</span
|
>
|
</div>
|
<div style="margin-top: 10px">
|
<div class="row" style="font-weight: bold">
|
<div class="cell">工单号</div>
|
<div class="cell">标准压力(t)</div>
|
<div class="cell">保压时间(h)</div>
|
<div class="cell">饼总层数</div>
|
<div class="cell">标准直径(mm)</div>
|
<div class="cell">实际直径(mm)</div>
|
<div class="cell">测宽结果</div>
|
<div class="cell" style="border-right: none;">工单状态</div>
|
</div>
|
<div class="body">
|
<div class="cell">{{ OrderInfo.work_order_no }}</div>
|
<div class="cell">{{ OrderInfo.pressure }}</div>
|
<div class="cell">{{ OrderInfo.holding_time }}</div>
|
<div class="cell">{{ OrderInfo.total_layer }}</div>
|
<div class="cell">{{ OrderInfo.diameter_res }}</div>
|
<div class="cell">{{ OrderInfo.measure_diameter_res }}</div>
|
<div class="cell"><span style="display: block;width: 60px;height: 25px;margin: 4px auto;border: 2px solid gray;" :class="getTolerance(OrderInfo.is_tolerance)"></span></div>
|
<div class="cell" style="border-right: none;" :class="OrderInfo.status==1?'ing':'end'">{{ OrderInfo.status==1?"工单进行中":"工单已完成" }}</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- <dv-water-level-pond :config="line" style="width:100px;height:85px;position: absolute;right: 85px;top: 20px;" /> -->
|
|
</div>
|
<div class="boxTitle">
|
<span
|
style="
|
width: 5px;
|
height: 30px;
|
background-color: #f34336;
|
display: block;
|
"
|
></span>
|
<span
|
style="
|
display: block;
|
padding-left: 15px;
|
font-size: 20px;
|
font-weight: bold;
|
"
|
>设备状态</span
|
>
|
</div>
|
<div style="display: flex;position: absolute;left: 10px;top: 112px; width:1400px;justify-content: space-between;">
|
<dv-border-box-13 class="box" title="垒饼机">
|
<div class="boxItem">
|
<div class="boxLeft">
|
<img src="../assets/LB.png" width="150" height="150" style="" />
|
</div>
|
<div class="boxRight">
|
<div
|
style="
|
font-size: 22px;
|
font-weight: bold;
|
color: red;
|
width: 160px;
|
margin-top: 20px;
|
"
|
>
|
垒饼机
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>心跳信号：</span
|
>
|
<span style="display: block; width: 50px;height: 25px;text-align: left;margin: 5px 0px;" :class="LbjInfo.rboolHeart==true?'success':'info'"></span>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>当前设备编号：</span
|
>
|
<span style="display: block; width: 100px; text-align: left"
|
>{{ LbjInfo.rintMCPDeviceID }}</span
|
>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>当前设备状态：</span
|
>
|
<span style="display: block; width: 100px; text-align: left"
|
>{{ GetDeviceStatus(LbjInfo.rintMCPDeviceStatus) }}</span
|
>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>当前设备流程：</span
|
>
|
<span style="display: block; width: 100px; text-align: left"
|
>{{ GetLbjStepNumber(LbjInfo.rintMCPAutoStepNumber) }}</span
|
>
|
</div>
|
</div>
|
</div>
|
</dv-border-box-13>
|
<dv-border-box-13 class="box" title="翻转机">
|
<div class="boxItem">
|
<div class="boxLeft">
|
<img src="../assets/FZ.png" width="150" height="150" style="" />
|
</div>
|
<div class="boxRight">
|
<div
|
style="
|
font-size: 22px;
|
color: red;
|
font-weight: bold;
|
width: 180px;
|
margin-top: 20px;
|
"
|
>
|
翻转机
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>心跳信号：</span
|
>
|
<span style="display: block; width: 50px;height: 25px;text-align: left;margin: 5px 0px;" :class="FzjInfo.rboolRCP1Heart==true?'success':'info'"></span>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>当前设备编号：</span
|
>
|
<span style="display: block; width: 100px; text-align: left"
|
>{{ FzjInfo.rintRCP1DeviceID }}</span
|
>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>当前设备状态：</span
|
>
|
<span style="display: block; width: 100px; text-align: left"
|
>{{ GetDeviceStatus(FzjInfo.rintRCP1DeviceStatus) }}</span
|
>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right"
|
>当前设备流程：</span
|
>
|
<span style="display: block; width: 100px; text-align: left"
|
>{{ GetFzjStepNumber(FzjInfo.rintRCP1AutoStepNumber) }}</span
|
>
|
</div>
|
</div>
|
</div>
|
</dv-border-box-13>
|
<dv-border-box-13 class="box" title="机械手">
|
<div class="boxItem">
|
<div class="boxLeft">
|
<img src="../assets/JX.png" width="150" height="150" style="" />
|
</div>
|
<div class="boxRight">
|
<div
|
style="
|
font-size: 22px;
|
color: red;
|
font-weight: bold;
|
width: 180px;
|
margin-top: 20px;
|
"
|
>
|
机械手
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right">心跳信号：</span>
|
<span style="display: block; width: 50px;height: 25px;text-align: left;margin: 5px 0px;" :class="JxsInfo.rboolRCP2Heart==true?'success':'info'"></span>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right">当前设备编号：</span>
|
<span style="display: block; width: 100px; text-align: left">{{ JxsInfo.rintRCP2DeviceID }}</span>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right">当前设备状态：</span>
|
<span style="display: block; width: 100px; text-align: left">{{ GetJxsDeviceStatus(JxsInfo.rintRCP2DeviceStatus) }}</span>
|
</div>
|
<div class="boxitem_down">
|
<span style="display: block; width: 160px; text-align: right">当前设备流程：</span>
|
<span style="display: block; width: 100px; text-align: left">{{ GetJxsStepNumber(JxsInfo.rintRCP2AutoStepNumber) }}</span>
|
</div>
|
</div>
|
</div>
|
</dv-border-box-13>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from "@/api/ajax.js";
|
export default {
|
data() {
|
return {
|
line: {
|
data: [86],
|
shape: 'roundRect',
|
waveOpacity:0.2,
|
colors:['#00baff']
|
},
|
config: {
|
header: [
|
'<span style="font-size:18px;">层数</span>',
|
'<span style="font-size:18px;">标准饼厚</span>',
|
'<span style="font-size:18px;">累计饼厚</span>',
|
'<span style="font-size:18px;">本层饼厚</span>'
|
],
|
data: [
|
[
|
'<span style="color:#67e0e3;">1层</span>',
|
'<span style="color:#9fe6b8;">60mm</span>',
|
'<span style="color:#fb7293;">60mm</span>',
|
],
|
[
|
'<span style="color:#67e0e3;">1层</span>',
|
'<span style="color:#9fe6b8;">60mm</span>',
|
'<span style="color:#fb7293;">60mm</span>',
|
]
|
],
|
waitTime: 5000,
|
columnWidth: [85,115,115,115],
|
align: ["center", "center", "center", "center"]
|
},
|
OrderInfo: {
|
|
},
|
LbjInfo:{
|
|
},
|
FzjInfo:{
|
|
},
|
JxsInfo:{
|
|
},
|
IsInterval:true,
|
IsPlc:true,
|
};
|
},
|
mounted() {
|
this.GetPLCData();
|
this.GetOrderInfos();
|
},
|
methods: {
|
GetOrderInfos() {
|
axios.post("/api/dt_WorkOrder/getWorkOrderInfo", null, "").then((res) => {
|
if (res.data.status) {
|
if(res.data.data==null && this.OrderInfo!=null){
|
this.OrderInfo.status=2;
|
return;
|
}
|
this.OrderInfo = res.data.data;
|
if(this.IsInterval){
|
setInterval(() => {
|
this.GetOrderInfos();
|
},5000);
|
this.IsInterval=false;
|
}
|
}
|
});
|
},
|
GetPLCData() {
|
axios.post("/api/dt_WorkOrder/getPLCData", null, "").then((res) => {
|
if (res.data.status) {
|
var data=res.data.data;
|
if(data==null)
|
return console.log("data值为空");
|
this.LbjInfo=data.lbj_data;
|
this.FzjInfo=data.fzj_data;
|
this.JxsInfo=data.zljxs_Data;
|
}
|
if(this.IsPlc){
|
setInterval(() => {
|
this.GetPLCData();
|
},1500);
|
this.IsPlc=false;
|
}
|
});
|
},
|
GetLbjStepNumber(val){
|
switch (val) {
|
case 0:
|
return "无";
|
case 1:
|
return "回待机位";
|
case (val>=10 && val<=19):
|
return "测高中";
|
case (val>=20 && val<=29):
|
return "测高完成后返回中";
|
case (val>=100 && val<=110):
|
return "压紧中";
|
default:
|
break;
|
}
|
},
|
GetFzjStepNumber(val){
|
switch (val) {
|
case 0:
|
return "无";
|
case 1:
|
return "回待机位";
|
case (val>=10 && val<=19):
|
return "正向送饼中";
|
case (val>=20 && val<=29):
|
return "反向送饼中";
|
default:
|
break;
|
}
|
},
|
GetJxsStepNumber(val){
|
switch (val) {
|
case 0:
|
return "无";
|
case 1:
|
return "设备待机中";
|
case 2:
|
return "设备运动中";
|
default:
|
break;
|
}
|
},
|
GetDeviceStatus(val){
|
switch (val) {
|
case 1:
|
return "自动作业";
|
case 2:
|
return "自动待机";
|
case 3:
|
return "故障";
|
case 4:
|
return "手动";
|
default:
|
break;
|
}
|
},
|
GetJxsDeviceStatus(val){
|
switch (val) {
|
case 1:
|
return "速度模式";
|
case 2:
|
return "力矩模式";
|
case 3:
|
return "位置模式";
|
case 4:
|
return "故障";
|
default:
|
break;
|
}
|
},
|
getTolerance(val){
|
if(val==true){
|
return 'success';
|
}else if(val==false){
|
return 'error';
|
}else{
|
return null;
|
}
|
}
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
$box-height: 420px;
|
$box-width: 1420px;
|
#box {
|
padding: 16px;
|
padding-top: 10px;
|
height: $box-height;
|
width: $box-width;
|
border-radius: 5px;
|
}
|
.container {
|
height: 750px;
|
width: 100%;
|
}
|
.boxTop {
|
width: 100%;
|
height: 300px;
|
padding-top: 20px;
|
display: flex;
|
}
|
.boxTop .box {
|
margin-top: 38px;
|
width: 450px;
|
height: 260px;
|
}
|
.boxItem {
|
display: flex;
|
background-color: rgb(0, 59, 81,0.6);
|
width: 435px;
|
margin: 15px auto;
|
height: 240px;
|
z-index: 0;
|
border-radius: 0% 5%;
|
}
|
.boxitem_down {
|
display: flex;
|
font-size: 20px;
|
color: whitesmoke;
|
}
|
.boxLeft {
|
margin-top: 50px;
|
margin-left: 10px;
|
width: 150px;
|
height: 150px;
|
}
|
.boxRight {
|
margin-left: 10px;
|
width: 300px;
|
height: 260px;
|
}
|
.boxRight div {
|
line-height: 35px;
|
text-align: right;
|
}
|
.boxOrderHeight {
|
height: 40px;
|
line-height: 30px;
|
width: 150px;
|
position: absolute;
|
left: 22px;
|
top: 120px;
|
display: flex;
|
}
|
.boxTitle {
|
height: 40px;
|
line-height: 30px;
|
width: 150px;
|
position: absolute;
|
left: 20px;
|
top: 115px;
|
display: flex;
|
}
|
.boxOrder {
|
margin-top: -10px;
|
}
|
.row {
|
display: flex;
|
background-color: rgb(0, 186, 255);
|
color: #fff;
|
height: 30px;
|
line-height: 30px;
|
font-size: 18px;
|
}
|
.cell {
|
width: 160px;
|
border-right: #fff 1px solid;
|
text-align: center;
|
}
|
.body {
|
display: flex;
|
background-color: rgb(0, 59, 81);
|
color: #fff;
|
height: 32px;
|
line-height: 32px;
|
}
|
.rows {
|
display: flex;
|
background-color: rgb(0, 186, 255);
|
color: #fff;
|
height: 30px;
|
line-height: 30px;
|
font-size: 18px;
|
}
|
.bodys {
|
display: flex;
|
background-color: rgb(0, 59, 81);
|
color: #fff;
|
height: 32px;
|
line-height: 32px;
|
}
|
.error{
|
background-color: red;
|
}
|
.success{
|
background-color: #67c23a;
|
}
|
.info{
|
background-color: lightgray;
|
}
|
.ing{
|
color: #ffff00;
|
}
|
.end{
|
color: #67c23a;
|
}
|
</style>
|
