<template>
|
|
<div id="big-data-container" class="big-data-container">
|
<div class="head">
|
<h1 style="font-size:50px;">轴承选配系统1号压装工位监控</h1>
|
</div>
|
|
<div class="data-container">
|
<div class="data-right" style="width:25%;">
|
<div class="data-right-item" style="height:25%;">
|
<div class="title">近7天出库统计</div>
|
<div id="left-chart-vleft-1" style="height: calc(100% - 30px)"></div>
|
</div>
|
<!-- <div class="title" style="font-size:28px">左侧轴承信息</div>
|
<img src="./bigdata/zc.png" :style="{opacity:1,height:'20%',width:'70%'}" />
|
|
<el-descriptions title="" direction="horizontal" :column="1" border>
|
<el-descriptions-item label="车型">18100000000</el-descriptions-item>
|
<el-descriptions-item label="型号"></el-descriptions-item>
|
<el-descriptions-item label="重量"></el-descriptions-item>
|
<el-descriptions-item label="测量标准">苏州市</el-descriptions-item>
|
<el-descriptions-item label="轴颈平均值"></el-descriptions-item>
|
<el-descriptions-item label="轴径过盈量"></el-descriptions-item>
|
<el-descriptions-item label="防尘板平均值">11</el-descriptions-item>
|
<el-descriptions-item label="防尘板过盈量">11</el-descriptions-item>
|
<el-descriptions-item label="油档平均值"></el-descriptions-item>
|
<el-descriptions-item label="油档过盈量">11</el-descriptions-item>
|
</el-descriptions> -->
|
<div class="data-right-item right-3">
|
<div class="title" style="font-size:28px">左侧轴承信息</div>
|
<img src="./bigdata/zc.png" :style="{opacity:1,height:'60%',width:'70%'}" />
|
<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.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 class="center-top-num">
|
<div class="item">
|
<div class="text">当日左侧出库统计</div>
|
<div class="num">{{zcInfo.leftTodayCount}}</div>
|
</div>
|
|
<div class="item">
|
<div class="text">当日右侧出库统计</div>
|
<div class="num">{{zcInfo.rightTodayCount}}</div>
|
</div>
|
<div class="data-foot-line"></div>
|
</div>
|
<!-- <div id="chart-vcenter" style="height:400px;" class="chart-vcenter"> -->
|
<img src="./bigdata/lundui.png" :style="{opacity:1,height:'40%'}" />
|
<div class="title" style="font-size:28px">选配信息(MES)</div>
|
<div class="center-top"
|
style="height: 50%; padding-top: 5px; overflow: hidden; text-align:center;">
|
<el-descriptions title="" direction="horizontal" :column="2" border>
|
<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.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" style="height:25%;">
|
<div class="title">近7天出库统计</div>
|
<div id="right-chart-vleft-1" style="height: calc(100% - 30px)"></div>
|
<div class="data-foot-line"></div>
|
</div>
|
|
<div class="data-right-item right-3">
|
<div class="title" style="font-size:28px">右侧轴承信息</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.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: '',
|
},
|
wmsInfo: {
|
materielId: '',
|
barcode: '',
|
fcbAVG: '',
|
fcbDiff: '',
|
ydAVG: '',
|
ydDiff: '',
|
zjAVG: '',
|
zjdDiff: '',
|
standa: '',
|
weight: '',
|
materielType: '',
|
},
|
},
|
rightStationInfo: {
|
mesInfo: {
|
materielId: '',
|
barcode: '',
|
fcbAVG: '',
|
ydAVG: '',
|
zjAVG: '',
|
},
|
wmsInfo: {
|
materielId: '',
|
barcode: '',
|
fcbAVG: '',
|
fcbDiff: '',
|
ydAVG: '',
|
ydDiff: '',
|
zjAVG: '',
|
zjdDiff: '',
|
standa: '',
|
weight: '',
|
materielType: '',
|
},
|
},
|
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: '70114',
|
rightEqNumber: '70113',
|
},
|
};
|
this.http
|
.post('api/Dt_TaskWCSinfo/QueryZCInfo', parm, true)
|
.then((reslut) => {
|
if (reslut.status) {
|
//console.log(JSON.stringify(reslut.data));
|
// .containerOverFlowData //数据
|
$chartLeft1 = echarts.init(
|
document.getElementById('left-chart-vleft-1')
|
);
|
let dateHty = reslut.data.listHtyInfo.dateHty;
|
let leftHty = reslut.data.listHtyInfo.leftHty;
|
//首页巷道空满托盘展示
|
var option = chartLeft2;
|
option.xAxis[0].data = dateHty;
|
option.series[0].data = leftHty;
|
debugger;
|
$chartLeft1.setOption(option, true);
|
|
$chartRight1 = echarts.init(
|
document.getElementById('right-chart-vleft-1')
|
);
|
let rightHty = reslut.data.listHtyInfo.rightHty;
|
//首页巷道库位使用率
|
var rightOption = chartLeft2;
|
rightOption.xAxis[0].data = dateHty;
|
rightOption.series[0].data = rightHty;
|
$chartRight1.setOption(rightOption, true);
|
} 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-bottom: 1px solid #549069;
|
flex: 1;
|
display: flex;
|
padding: 5px 10px;
|
margin: 0 10px;
|
font-size: 25px;
|
line-height: 30px;
|
}
|
|
.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: 88px;
|
}
|
|
.right-3 .pro-name {
|
flex: 1;
|
}
|
/deep/ .el-descriptions__body {
|
background: transparent !important;
|
font-size: 20px !important;
|
/* text-align: center !important; */
|
}
|
|
/deep/ .el-descriptions__label {
|
background: transparent !important;
|
font-size: 25px !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: 200px !important;
|
}
|
</style>
|
