Vue.component("devp-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="searchStationId" placeholder="请输入站号"></el-input><el-button @click="getDevpStateInfo" 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.stationId" placeholder="站号"></el-input></div>
|
<div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.taskNo" placeholder="工作号"></el-input></div>
|
<div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.targetStationId" placeholder="目标站"></el-input></div>
|
<div style="margin-bottom: 10px;"><el-button @click="controlCommand()" size="mini">下发</el-button></div>
|
</div>
|
</div>
|
<el-collapse v-model="activeNames">
|
<el-collapse-item v-for="(item) in stationList" :name="item.stationId">
|
<template slot="title">
|
<div style="width: 100%;display: flex;">
|
<div style="width: 50%;">{{ item.stationId }}站</div>
|
<div style="width: 50%;text-align: right;">
|
<el-tag v-if="item.autoing" type="success" 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.stationId }}</el-descriptions-item>
|
<el-descriptions-item label="工作号">{{ item.taskNo }}</el-descriptions-item>
|
<el-descriptions-item label="目标站">{{ item.targetStaNo }}</el-descriptions-item>
|
<el-descriptions-item label="模式">{{ item.autoing ? '自动' : '手动' }}</el-descriptions-item>
|
<el-descriptions-item label="有物">{{ item.loading ? '有' : '无' }}</el-descriptions-item>
|
<el-descriptions-item label="可入">{{ item.inEnable ? 'Y' : 'N' }}</el-descriptions-item>
|
<el-descriptions-item label="可出">{{ item.outEnable ? 'Y' : 'N' }}</el-descriptions-item>
|
<el-descriptions-item label="空板信号">{{ item.emptyMk ? 'Y' : 'N' }}</el-descriptions-item>
|
<el-descriptions-item label="满板信号">{{ item.fullPlt ? 'Y' : 'N' }}</el-descriptions-item>
|
<el-descriptions-item label="托盘高度">{{ item.palletHeight }}</el-descriptions-item>
|
<el-descriptions-item label="条码">{{ item.barcode }}</el-descriptions-item>
|
<el-descriptions-item label="故障代码">{{ item.error }}</el-descriptions-item>
|
</el-descriptions>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
`,
|
props: ["param"],
|
data() {
|
return {
|
stationList: [],
|
activeNames: "",
|
searchStationId: "",
|
showControl: true,
|
controlParam: {
|
stationId: "",
|
taskNo: "",
|
targetStationId: "",
|
},
|
};
|
},
|
created() {
|
setInterval(() => {
|
this.getDevpStateInfo();
|
}, 1000);
|
},
|
watch: {
|
param: {
|
handler(newVal, oldVal) {
|
if (newVal.stationId != 0) {
|
this.activeNames = newVal.stationId;
|
this.searchStationId = newVal.stationId;
|
}
|
},
|
deep: true, // 深度监听嵌套属性
|
immediate: true, // 立即触发一次（可选）
|
},
|
},
|
methods: {
|
getDevpStateInfo() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/console/latest/data/station",
|
headers: {
|
token: localStorage.getItem("token"),
|
},
|
method: "post",
|
success: (res) => {
|
// 堆垛机信息表获取
|
if (res.code == 200) {
|
let list = res.data;
|
|
if (that.searchStationId == "") {
|
that.stationList = list;
|
} else {
|
let tmp = [];
|
list.forEach((item) => {
|
if (item.stationId == that.searchStationId) {
|
tmp.push(item);
|
}
|
});
|
that.stationList = tmp;
|
}
|
}
|
},
|
});
|
},
|
openControl() {
|
this.showControl = !this.showControl;
|
},
|
controlCommand() {
|
let that = this;
|
//下发命令
|
$.ajax({
|
url: baseUrl + "/station/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",
|
});
|
}
|
},
|
});
|
},
|
},
|
});
|
