Vue.component("watch-dual-crn-card", {
|
template: `
|
<div>
|
<div style="display: flex;margin-bottom: 10px;">
|
<div style="width: 100%;">双工位堆垛机监控</div>
|
<div style="width: 100%;text-align: right;display: flex;">
|
<el-input size="mini" v-model="searchCrnNo" placeholder="请输入堆垛机号"></el-input>
|
<el-button @click="getDualCrnStateInfo" size="mini">查询</el-button>
|
</div>
|
</div>
|
<div style="margin-bottom: 10px;">
|
<div style="margin-bottom: 5px;">
|
<el-button v-if="showControl" @click="openControl" size="mini">关闭控制中心</el-button>
|
<el-button v-else @click="openControl" size="mini">打开控制中心</el-button>
|
</div>
|
<div v-if="showControl" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
|
<div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.crnNo" placeholder="堆垛机号"></el-input></div>
|
<div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.sourceLocNo" placeholder="源点"></el-input></div>
|
<div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.targetLocNo" placeholder="目标点"></el-input></div>
|
<div style="margin-bottom: 10px;width: 33%;">
|
<el-select size="mini" v-model="controlParam.station" placeholder="工位">
|
<el-option :label="'工位1'" :value="1"></el-option>
|
<el-option :label="'工位2'" :value="2"></el-option>
|
</el-select>
|
</div>
|
<div style="margin-bottom: 10px;"><el-button @click="controlCommandTransport()" size="mini">取放货</el-button></div>
|
<div style="margin-bottom: 10px;"><el-button @click="controlCommandMove()" size="mini">移动</el-button></div>
|
<div style="margin-bottom: 10px;"><el-button @click="controlCommandTaskComplete()" size="mini">任务完成</el-button></div>
|
</div>
|
</div>
|
<div style="max-height: 55vh; overflow:auto;">
|
<el-collapse v-model="activeNames" accordion>
|
<el-collapse-item v-for="(item) in displayCrnList" :name="item.crnNo">
|
<template slot="title">
|
<div style="width: 100%;display: flex;">
|
<div style="width: 50%;">{{ item.crnNo }}号双工位堆垛机</div>
|
<div style="width: 50%;text-align: right;">
|
<el-tag v-if="item.deviceStatus == 'AUTO'" type="success" size="small">自动</el-tag>
|
<el-tag v-else-if="item.deviceStatus == 'WORKING'" size="small">作业中</el-tag>
|
<el-tag v-else-if="item.deviceStatus == 'ERROR'" type="danger" size="small">故障</el-tag>
|
<el-tag v-else type="warning" size="small">离线</el-tag>
|
</div>
|
</div>
|
</template>
|
<el-descriptions border direction="vertical">
|
<el-descriptions-item label="模式">{{ item.mode }}</el-descriptions-item>
|
<el-descriptions-item label="异常码">{{ item.warnCode }}</el-descriptions-item>
|
<el-descriptions-item label="工位1任务号">{{ item.taskNo }}</el-descriptions-item>
|
<el-descriptions-item label="工位2任务号">{{ item.taskNoTwo }}</el-descriptions-item>
|
<el-descriptions-item label="工位1状态">{{ item.status }}</el-descriptions-item>
|
<el-descriptions-item label="工位2状态">{{ item.statusTwo }}</el-descriptions-item>
|
<el-descriptions-item label="工位1是否有物">{{ item.loading }}</el-descriptions-item>
|
<el-descriptions-item label="工位2是否有物">{{ item.loadingTwo }}</el-descriptions-item>
|
<el-descriptions-item label="工位1列">{{ item.bay }}</el-descriptions-item>
|
<el-descriptions-item label="工位2列">{{ item.bayTwo }}</el-descriptions-item>
|
<el-descriptions-item label="工位1层">{{ item.lev }}</el-descriptions-item>
|
<el-descriptions-item label="工位2层">{{ item.levTwo }}</el-descriptions-item>
|
<el-descriptions-item label="工位1货叉定位">{{ item.forkOffset }}</el-descriptions-item>
|
<el-descriptions-item label="工位2货叉定位">{{ item.forkOffsetTwo }}</el-descriptions-item>
|
<el-descriptions-item label="工位1载货台定位">{{ item.liftPos }}</el-descriptions-item>
|
<el-descriptions-item label="工位2载货台定位">{{ item.liftPosTwo }}</el-descriptions-item>
|
<el-descriptions-item label="工位1走行在定位">{{ item.walkPos }}</el-descriptions-item>
|
<el-descriptions-item label="工位2走行在定位">{{ item.walkPosTwo }}</el-descriptions-item>
|
<el-descriptions-item label="走行速度（m/min)">{{ item.xspeed }}</el-descriptions-item>
|
<el-descriptions-item label="升降速度（m/min)">{{ item.yspeed }}</el-descriptions-item>
|
<el-descriptions-item label="叉牙速度（m/min)">{{ item.zspeed }}</el-descriptions-item>
|
<el-descriptions-item label="走行距离(Km)">{{ item.xdistance }}</el-descriptions-item>
|
<el-descriptions-item label="升降距离(Km)">{{ item.ydistance }}</el-descriptions-item>
|
<el-descriptions-item label="走行时长(H)">{{ item.xduration }}</el-descriptions-item>
|
<el-descriptions-item label="升降时长(H)">{{ item.yduration }}</el-descriptions-item>
|
<el-descriptions-item label="扩展数据">{{ item.extend }}</el-descriptions-item>
|
</el-descriptions>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
<div style="display:flex; justify-content:flex-end; margin-top:8px;">
|
<el-pagination
|
@current-change="handlePageChange"
|
@size-change="handleSizeChange"
|
:current-page="currentPage"
|
:page-size="pageSize"
|
:page-sizes="[10,20,50,100]"
|
layout="total, prev, pager, next"
|
:total="crnList.length">
|
</el-pagination>
|
</div>
|
</div>
|
`,
|
props: ["param"],
|
data() {
|
return {
|
crnList: [],
|
activeNames: "",
|
searchCrnNo: "",
|
showControl: false,
|
controlParam: {
|
crnNo: "",
|
sourceLocNo: "",
|
targetLocNo: "",
|
station: 1,
|
},
|
pageSize: 25,
|
currentPage: 1,
|
};
|
},
|
created() {
|
setInterval(() => {
|
this.getDualCrnStateInfo();
|
}, 1000);
|
},
|
computed: {
|
displayCrnList() {
|
const start = (this.currentPage - 1) * this.pageSize;
|
const end = start + this.pageSize;
|
return this.crnList.slice(start, end);
|
}
|
},
|
watch: {
|
param: {
|
handler(newVal) {
|
if (newVal.crnNo != 0) {
|
this.activeNames = newVal.crnNo;
|
this.searchCrnNo = newVal.crnNo;
|
const idx = this.crnList.findIndex(i => i.crnNo == newVal.crnNo);
|
if (idx >= 0) { this.currentPage = Math.floor(idx / this.pageSize) + 1; }
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
},
|
methods: {
|
handlePageChange(page) {
|
this.currentPage = page;
|
},
|
handleSizeChange(size) {
|
this.pageSize = size;
|
this.currentPage = 1;
|
},
|
openControl() {
|
this.showControl = !this.showControl;
|
},
|
getDualCrnStateInfo() {
|
if (this.$root.sendWs) {
|
this.$root.sendWs(JSON.stringify({
|
"url": "/dualcrn/table/crn/state",
|
"data": {}
|
}));
|
}
|
},
|
controlCommandTransport() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/dualcrn/command/take",
|
headers: {
|
token: localStorage.getItem("token"),
|
},
|
contentType: "application/json",
|
method: "post",
|
data: JSON.stringify(that.controlParam),
|
success: (res) => {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: "success",
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: "warning",
|
});
|
}
|
},
|
});
|
},
|
controlCommandMove() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/dualcrn/command/move",
|
headers: {
|
token: localStorage.getItem("token"),
|
},
|
contentType: "application/json",
|
method: "post",
|
data: JSON.stringify(that.controlParam),
|
success: (res) => {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: "success",
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: "warning",
|
});
|
}
|
},
|
});
|
},
|
controlCommandTaskComplete() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/dualcrn/command/taskComplete",
|
headers: {
|
token: localStorage.getItem("token"),
|
},
|
contentType: "application/json",
|
method: "post",
|
data: JSON.stringify(that.controlParam),
|
success: (res) => {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: "success",
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: "warning",
|
});
|
}
|
},
|
});
|
},
|
setDualCrnList(res) {
|
let that = this;
|
if (res.code == 200) {
|
let list = res.data;
|
if (that.searchCrnNo == "") {
|
that.crnList = list;
|
} else {
|
let tmp = [];
|
list.forEach((item) => {
|
if (item.crnNo == that.searchCrnNo) {
|
tmp.push(item);
|
}
|
});
|
that.crnList = tmp;
|
that.currentPage = 1;
|
}
|
}
|
},
|
},
|
});
|
