<template>
|
|
<div id="big-data-container" class="big-data-container">
|
<div class="head">
|
<h1 style="font-size:40px;">轴承智能选配系统2号压装工位监控</h1>
|
</div>
|
<div class="data-container">
|
<div class="data-right" style="width:25%;">
|
<div class="data-right-item right-3">
|
<div class="title" style="font-size:15px">左侧轴承信息</div>
|
<div id="chart-vright-3" class="right-item">
|
<div class="item">
|
<div class="pro-name">托盘号</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.barcode}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">轴承编码</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.materielNumber}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">车型</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.materielId}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">型号</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.materielType}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">重量(克)</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.weight}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">测量标准</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.standa}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">轴承内径平均值</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.zjAVG}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">轴承内径过盈量</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.zjdDiff}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">防尘板平均值</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.fcbAVG}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">防尘板过盈量</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.fcbDiff}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">油档平均值</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.ydAVG}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">油档过盈量</div>
|
<div class="pro-name">{{zcInfo.leftStationInfo.wmsInfo.ydDiff}}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="data-center" style="width:50%;">
|
|
<!-- <div id="chart-vcenter" style="height:400px;" class="chart-vcenter"> -->
|
<div class="title" style="font-size:10px">选配信息(MES)</div>
|
<div class="center-top" style="padding-top: 1px; overflow: hidden; text-align:center;">
|
<el-descriptions title="" direction="horizontal" :column="2">
|
<el-descriptions-item
|
label="轮对编码">{{zcInfo.leftStationInfo.mesInfo.barcode}}</el-descriptions-item>
|
<el-descriptions-item
|
label="轮对编码">{{zcInfo.rightStationInfo.mesInfo.barcode}}</el-descriptions-item>
|
<el-descriptions-item
|
label="轮对号">{{zcInfo.leftStationInfo.mesInfo.ldCode}}</el-descriptions-item>
|
<el-descriptions-item
|
label="轮对号">{{zcInfo.rightStationInfo.mesInfo.ldCode}}</el-descriptions-item>
|
<el-descriptions-item
|
label="车型">{{zcInfo.leftStationInfo.mesInfo.materielId}}</el-descriptions-item>
|
<el-descriptions-item
|
label="车型">{{zcInfo.rightStationInfo.mesInfo.materielId}}</el-descriptions-item>
|
<el-descriptions-item
|
label="左轴承内径平均值">{{zcInfo.leftStationInfo.mesInfo.zjAVG}}</el-descriptions-item>
|
<el-descriptions-item
|
label="右轴承内径平均值">{{zcInfo.rightStationInfo.mesInfo.zjAVG}}</el-descriptions-item>
|
<el-descriptions-item
|
label="左防尘板平均值">{{zcInfo.leftStationInfo.mesInfo.fcbAVG}}</el-descriptions-item>
|
<el-descriptions-item
|
label="右防尘板平均值">{{zcInfo.rightStationInfo.mesInfo.fcbAVG}}</el-descriptions-item>
|
<el-descriptions-item
|
label="左油档平均值">{{zcInfo.leftStationInfo.mesInfo.ydAVG}}</el-descriptions-item>
|
<el-descriptions-item
|
label="右油档平均值">{{zcInfo.rightStationInfo.mesInfo.ydAVG}}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<!-- </div> -->
|
</div>
|
<div class="data-right" style="width:25%;">
|
|
<div class="data-right-item right-3">
|
<div class="title" style="font-size:15px">右侧轴承信息</div>
|
<!-- <img src="./bigdata/zc.png" :style="{opacity:1,height:'60%',width:'70%'}" /> -->
|
<div id="right-chart-vright-3" class="right-item">
|
<div class="item">
|
<div class="pro-name">托盘号</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.barcode}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">轴承编码</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.materielNumber}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">车型</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.materielId}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">型号</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.materielType}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">重量(克)</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.weight}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">测量标准</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.standa}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">轴承内径平均值</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.zjAVG}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">轴承内径过盈量</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.zjdDiff}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">防尘板平均值</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.fcbAVG}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">防尘板过盈量</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.fcbDiff}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">油档平均值</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.ydAVG}}</div>
|
</div>
|
<div class="item">
|
<div class="pro-name">油档过盈量</div>
|
<div class="pro-name">{{zcInfo.rightStationInfo.wmsInfo.ydDiff}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
var echarts = require('echarts');
|
let $chartLeft1, $chartRight1;
|
import IviewCircle from './bigdata/IviewCircle';
|
import { chartLeft2 } from './bigdata/chart-options';
|
import './bigdata/layout.less';
|
export default {
|
components: {
|
'iview-circle': IviewCircle,
|
},
|
data() {
|
return {
|
zcInfo: {
|
leftStationInfo: {
|
mesInfo: {
|
materielId: '',
|
barcode: '',
|
fcbAVG: '',
|
ydAVG: '',
|
zjAVG: '',
|
ldCode: '',
|
},
|
wmsInfo: {
|
materielId: '',
|
barcode: '',
|
fcbAVG: '',
|
fcbDiff: '',
|
ydAVG: '',
|
ydDiff: '',
|
zjAVG: '',
|
zjdDiff: '',
|
standa: '',
|
weight: '',
|
materielType: '',
|
materielNumber: '',
|
},
|
},
|
rightStationInfo: {
|
mesInfo: {
|
materielId: '',
|
barcode: '',
|
fcbAVG: '',
|
ydAVG: '',
|
zjAVG: '',
|
ldCode: '',
|
},
|
wmsInfo: {
|
materielId: '',
|
barcode: '',
|
fcbAVG: '',
|
fcbDiff: '',
|
ydAVG: '',
|
ydDiff: '',
|
zjAVG: '',
|
zjdDiff: '',
|
standa: '',
|
weight: '',
|
materielType: '',
|
materielNumber: '',
|
},
|
},
|
leftTodayCount: 0,
|
rightTodayCount: 0,
|
listHtyInfo: { date: '', leftHty: '', rightHty: '' },
|
},
|
};
|
},
|
created() {
|
this.QueryZCInfo();
|
// var that = this;
|
// setInterval(function () {
|
// this.QueryZCInfo();
|
// }, 8000);
|
},
|
mounted() {
|
if ($chartLeft1) {
|
$chartLeft1.dispose();
|
$chartRight1.dispose();
|
}
|
},
|
destroyed() {
|
$chartLeft1 = null;
|
$chartRight1 = null;
|
clearInterval(this.QueryZCInfo);
|
},
|
methods: {
|
QueryZCInfo() {
|
let parm = {
|
MainData: {
|
leftEqNumber: '70110',
|
rightEqNumber: '70109',
|
},
|
};
|
this.http
|
.post('api/Dt_TaskWCSinfo/QueryZCInfo', parm, false)
|
.then((reslut) => {
|
if (reslut.status) {
|
//console.log(JSON.stringify(reslut.data));
|
// .containerOverFlowData //数据
|
this.zcInfo = JSON.parse(JSON.stringify(reslut.data));
|
} else {
|
this.errorMessage = reslut.message;
|
}
|
});
|
},
|
},
|
beforeRouteEnter(to, from, next) {
|
next((vm) => {
|
vm.QueryZCInfo = setInterval(vm.QueryZCInfo, 8000);
|
});
|
},
|
beforeRouteLeave(to, from, next) {
|
clearInterval(this.QueryZCInfo);
|
next();
|
},
|
};
|
</script>
|
<style scoped>
|
.right-3 {
|
display: flex;
|
flex-direction: column;
|
/* margin-top: 20px; */
|
}
|
|
.right-3 .right-item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.right-3 .item {
|
text-align: left;
|
/* border: 1px solid #549069; */
|
flex: 1;
|
display: flex;
|
padding: 6px 5px;
|
margin: 0 0px;
|
font-size: 13px;
|
line-height: 2%;
|
color: white;
|
}
|
|
.right-3 .item:last-child {
|
border-bottom: 0;
|
}
|
|
.right-3 .item > div {
|
color: white;
|
}
|
|
.right-3 .top {
|
width: 60px;
|
position: relative;
|
}
|
|
.right-3 .top span {
|
position: absolute;
|
width: 20px;
|
line-height: 20px;
|
top: 5px;
|
text-align: center;
|
border-radius: 5px;
|
}
|
|
.right-3 .top-1 span {
|
background: #e80d0d;
|
}
|
|
.right-3 .top-2 span {
|
background: #00c935;
|
}
|
|
.right-3 .top-3 span {
|
background: #0083f4;
|
}
|
|
.right-3 .num {
|
width: 50px;
|
}
|
|
.right-3 .pro-name {
|
flex: 1;
|
}
|
/deep/ .el-descriptions__body {
|
background: transparent !important;
|
font-size: 13px !important;
|
/* text-align: center !important; */
|
}
|
|
/deep/ .el-descriptions__label {
|
background: transparent !important;
|
font-size: 13px !important;
|
/* text-align: center !important; */
|
color: rgb(178, 177, 185);
|
}
|
/deep/ .el-descriptions__content {
|
color: rgb(69, 209, 174);
|
/* text-align: center !important; */
|
}
|
/deep/.el-tag {
|
white-space: normal !important;
|
height: auto !important;
|
}
|
/deep/ .el-descriptions__label,
|
is-bordered-label,
|
is-left {
|
width: 100px !important;
|
padding: 6px !important;
|
}
|
</style>
|
