<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<title>设备监控</title>
|
<link rel="stylesheet" href="../../static/wcs/css/element.css">
|
<script type="text/javascript" src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/wcs/js/common.js"></script>
|
<script type="text/javascript" src="../../static/wcs/js/vue.min.js"></script>
|
<script type="text/javascript" src="../../static/wcs/js/element.js"></script>
|
<style>
|
.crnBox .el-carousel__item:nth-child(1n) {
|
background: #fff;
|
border: 1px solid #DCDFE6;
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
color: #303133;
|
}
|
|
.devpBox .el-carousel__item:nth-child(1n) {
|
background: #fff;
|
border: 1px solid #DCDFE6;
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
color: #303133;
|
}
|
|
.deviceContainer {
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
}
|
|
.deviceBox {
|
width: 600px;
|
margin-top: 10px;
|
}
|
|
.devpBox {
|
margin-top: 20px;
|
}
|
|
.deviceHeader {
|
text-align: center;
|
font-size: 24px;
|
}
|
|
.deviceBody {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
margin-top: 20px;
|
flex-wrap: wrap;
|
}
|
|
.deviceItem {
|
width: 200px;
|
height: 40px;
|
}
|
|
.devpDeviceBox {
|
width: 230px;
|
margin-top: 10px;
|
}
|
|
.devpDeviceItem {
|
width: 110px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="app">
|
<el-card class="box-card crnBox">
|
<div slot="header" class="clearfix">
|
<span>堆垛机</span>
|
</div>
|
<div class="deviceContainer">
|
<div v-for="(item,index) in crnList" :key="index" class="deviceBox">
|
<div class="deviceHeader">{{item.crnNo}}号堆垛机</div>
|
<div class="deviceBody">
|
<div class="deviceItem">
|
<span>堆垛机：</span>
|
<span>{{ item.crnNo }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>工作号：</span>
|
<span>{{ item.workNo }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>模式：</span>
|
<span><el-tag :type="item.statusType == '自动' ? 'success':'danger'">{{ item.statusType }}</el-tag></span>
|
</div>
|
<div class="deviceItem">
|
<span>任务状态：</span>
|
<span><el-tag :type="item.wrkStatus == 0 ? '':'success'">{{ item.wrkStatus$ }}</el-tag></span>
|
</div>
|
<div class="deviceItem">
|
<span>设备状态：</span>
|
<span><el-tag :type="item.deviceStatus == '自动' ? 'success':'danger'">{{ item.deviceStatus }}</el-tag></span>
|
</div>
|
<div class="deviceItem">
|
<span>有物：</span>
|
<span><el-tag :type="item.loading == '无物' ? '':'success'">{{ item.loading }}</el-tag></span>
|
</div>
|
<div class="deviceItem">
|
<span>列：</span>
|
<span>{{ item.bay }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>层：</span>
|
<span>{{ item.lev }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>故障代码：</span>
|
<span>{{ item.warnCode }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>故障描述：</span>
|
<span>{{ item.error }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>源站：</span>
|
<span>{{ item.sourceStaNo }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>目标站：</span>
|
<span>{{ item.staNo }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>源库位：</span>
|
<span>{{ item.sourceLocNo }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>目标库位：</span>
|
<span>{{ item.locNo }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>货叉定位：</span>
|
<span>{{ item.forkOffset }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>载货台定位：</span>
|
<span>{{ item.liftPos }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>走行在定位：</span>
|
<span>{{ item.walkPos }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>走行速度(m/min)：</span>
|
<span>{{ item.xspeed }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>升降速度(m/min)：</span>
|
<span>{{ item.yspeed }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>叉牙速度(m/min)：</span>
|
<span>{{ item.zspeed }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>走行距离(Km)：</span>
|
<span>{{ item.xdistance }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>升降距离(Km)：</span>
|
<span>{{ item.ydistance }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>走行时长(H)：</span>
|
<span>{{ item.xduration }}</span>
|
</div>
|
<div class="deviceItem">
|
<span>升降时长(H)：</span>
|
<span>{{ item.yduration }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
<el-card class="box-card devpBox">
|
<div slot="header" class="clearfix">
|
<span>输送线</span>
|
</div>
|
<div v-for="(val,index) in devpList" :key="index" w>
|
<div style="display: flex;justify-content: space-around;width: 100%;margin-top: 20px;">
|
<div v-for="(item,idx) in val" :key="idx" class="devpDeviceBox">
|
<div class="deviceHeader">{{item.devNo}}号站点</div>
|
<div class="deviceBody">
|
<div class="devpDeviceItem">
|
<span>站点：</span>
|
<span>{{ item.devNo }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>工作号：</span>
|
<span>{{ item.workNo }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>自动：</span>
|
<span>{{ item.autoing }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>有物：</span>
|
<span>{{ item.loading }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>可入：</span>
|
<span>{{ item.inEnable }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>可出：</span>
|
<span>{{ item.outEnable }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>入库标记：</span>
|
<span>{{ item.pakMk }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>空板信号：</span>
|
<span>{{ item.emptyMk }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>目标站：</span>
|
<span>{{ item.staNo }}</span>
|
</div>
|
<div class="devpDeviceItem">
|
<span>高低库位：</span>
|
<span>{{ item.locType1 }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
crnList: [],
|
crnListHeight: '200px',
|
devpList: [],
|
devpListHeight: '200px',
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.getCrnList()
|
this.getDevpList()
|
|
setInterval(() => {
|
this.getCrnList()
|
this.getDevpList()
|
}, 1000)
|
},
|
getCrnList() {
|
//获取堆垛机list
|
let that = this
|
$.ajax({
|
url: baseUrl + "/crn/list/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'GET',
|
success: function (res) {
|
that.crnList = res.data
|
|
that.$nextTick(()=>{
|
that.crnListHeight = that.$refs.crnCarousel[0].offsetHeight + "px"
|
})
|
}
|
});
|
},
|
getDevpList() {
|
//获取输送线list
|
let that = this
|
$.ajax({
|
url: baseUrl + "/site/list/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'GET',
|
success: function (res) {
|
let list = []
|
let tmp = []
|
res.data.forEach((item,index) => {
|
if (index % 5 == 0) {
|
if (tmp.length != 0) {
|
list.push(tmp)
|
}
|
tmp = [];
|
}
|
|
tmp.push(item)
|
})
|
|
that.devpList = list
|
that.$nextTick(()=>{
|
that.crnListHeight = that.$refs.crnCarousel[0].offsetHeight + "px"
|
})
|
}
|
});
|
}
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
