<template>
|
<div>
|
<el-row>
|
<template v-for="item in 32" :key="item">
|
<el-col :span="0.9">
|
<span class="image-text"></span>
|
<img src="../../public/货架.jpeg" />
|
</el-col>
|
</template>
|
</el-row>
|
<el-row style="padding-bottom: 5px;">
|
<template v-for="item in 32" :key="item">
|
<el-col :span="0.9">
|
<span class="image-text"></span>
|
<img src="../../public/货架.jpeg" />
|
</el-col>
|
</template>
|
</el-row>
|
</div>
|
<div class="line-container">
|
<div class="line"></div>
|
<!-- <div class="dot" :style="{ right: dotPosition + 'px' }" ref="childDot" @click="mouseClick"></div> -->
|
<div :class="update()"
|
:style="{ transform: `translateX(${StackerCrane.CurrentColumn < 33 ? StackerCrane.CurrentColumn * 30 - 59 : 0}px)` }"
|
ref="childDot" @click="mouseClick"></div>
|
</div>
|
<div>
|
<el-row style="padding-top: 5px;">
|
<template v-for="item in 32" :key="item">
|
<el-col :span="0.9">
|
<span class="image-text"></span>
|
<img src="../../public/货架.jpeg" />
|
</el-col>
|
</template>
|
</el-row>
|
<el-row style="padding-bottom: 5px;">
|
<template v-for="item in 32" :key="item">
|
<el-col :span="0.9">
|
<span class="image-text"></span>
|
<img src="../../public/货架.jpeg" />
|
</el-col>
|
</template>
|
</el-row>
|
</div>
|
|
<el-dialog v-model="dialogVisible" title="堆垛机信息查看" :before-close="handleClose">
|
<el-form ref="$form" :model="StackerCrane" label-position="left" label-width="120px" size="medium">
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="设备编号：">
|
<j-el-description :value="StackerCrane.DeviceName" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="设备状态:">
|
<j-el-description :value="StackerCrane.Fault" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="工作模式:">
|
<j-el-description :value="StackerCrane.Automatic" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="任务号：">
|
<j-el-description :value="StackerCrane.CurrentTaskNum" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div" style="margin-bottom: 10px;">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="作业状态:">
|
<j-el-description :value="StackerCrane.Running" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="当前行列层：">
|
<j-el-description
|
:value="StackerCrane.CurrentRow + '-' + StackerCrane.CurrentColumn + '-' + StackerCrane.CurrentLayer"
|
type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div" style="margin-bottom: 10px;">
|
<el-col :span="24" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="报警信息:">
|
<j-el-description :value="StackerCrane.StackerAlarm" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-divider />
|
<h4 style="margin-bottom: 20px;">手动操作</h4>
|
<el-form ref="form" :model="form" label-width="90px">
|
<el-row :gutter="24" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="坐标:">
|
<!-- <j-el-description type="primary" ellipsis></j-el-description> -->
|
<span style="font-size: 20px;color: #fc0303;">一楼库前出库坐标：2-1-1、 入库坐标：3-1-1</span>
|
<span style="font-size: 20px;color: #fc0303;">一楼库后出库坐标：3-1-34、入库坐标：2-1-34</span>
|
<span style="font-size: 20px;color: #fc0303;">二楼库前出库坐标：2-2-1、 入库坐标：3-2-1</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="任务命令" prop="TargetAddress">
|
<el-select size="large" v-model="form.TaskType" placeholder="请选择任务命令">
|
<el-option label="入库" value="17" />
|
<el-option label="出库" value="18" />
|
<el-option label="移库" value="20" />
|
<el-option label="取货" value="24" />
|
<el-option label="放货" value="48" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="起点行列层:">
|
<el-input size="large" v-model="form.SourceAddress" style="width: 800px" placeholder="请输入起点行列层" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="终点行列层:">
|
<el-input size="large" v-model="form.TargetAddress" style="width: 800px" placeholder="请输入终点行列层" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider />
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="8" :offset="0" :push="0" :pull="0" tag="div">
|
<el-button type="primary" size="small" plain @click="start">
|
<i class="el-icon-check">启动</i>
|
</el-button>
|
|
</el-col>
|
<el-col :span="8" :offset="0" :push="0" :pull="0" tag="div">
|
<el-button type="warning" size="small" plain @click="reset">
|
<i class="el-icon-check">复位</i>
|
</el-button>
|
|
</el-col>
|
<el-col :span="8" :offset="0" :push="0" :pull="0" tag="div">
|
<el-button type="danger" size="small" plain @click="emergencyStop">
|
<i class="el-icon-check">急停</i>
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="dialogVisible = false">
|
确认
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { id } from "element-plus/es/locale";
|
import JElDescription from "./JElDescription";
|
export default {
|
components: {
|
JElDescription
|
},
|
data() {
|
return {
|
x: 0, // 初始x值
|
url: "api/Equipment/GetStackerInfoByNo",
|
dialogVisible: false,
|
StackerCrane: {
|
Automatic: "",
|
Fault: "",
|
CurrentLayer: "1",
|
CurrentRow: "1",
|
CurrentColumn: "1",
|
CurrentTaskNum: "",
|
Running: "",
|
DeviceName: "",
|
DeviceCode: "",
|
StackerAlarm:"",
|
},
|
form: {
|
TaskType: "",
|
SourceAddress: "",
|
TargetAddress: "",
|
DeviceCode: "",
|
},
|
};
|
},
|
props: {
|
equipNo: {
|
type: String,
|
default: "0",
|
},
|
},
|
computed: {
|
dotPosition() {
|
return this.x;
|
},
|
},
|
mounted() {
|
this.moveDot(this.x);
|
},
|
methods: {
|
moveDot(x) {
|
this.StackerCrane.Automatic = x.Automatic == null ? "故障" : x.Automatic;
|
this.StackerCrane.Fault = x.Fault == null ? "故障" : x.Fault;
|
this.StackerCrane.Running = x.Running == null ? "故障" : x.Running;
|
this.StackerCrane.CurrentColumn = x.CurrentColumn == undefined ? 1 : x.CurrentColumn;
|
this.StackerCrane.CurrentLayer = x.CurrentLayer == undefined ? 1 : x.CurrentLayer;
|
this.StackerCrane.LevelPoint = x.LevelPoint;
|
this.StackerCrane.DeviceName = x.DeviceName;
|
this.StackerCrane.StackerAlarm = x.StackerAlarm;
|
this.form.DeviceCode = x.DeviceCode;
|
},
|
update() {
|
if (this.StackerCrane.Automatic == "联机模式" && this.StackerCrane.Fault != "故障" && this.StackerCrane.Running == "待机") {
|
return 'dot-Automatic ';
|
}
|
else if (this.StackerCrane.Automatic == "联机模式" && this.StackerCrane.Fault != "故障" && this.StackerCrane.Running == "运行中") {
|
return 'dot-Running ';
|
} else if (this.StackerCrane.Fault == "故障") {
|
return 'dot-Fault ';
|
} else {
|
return 'dot-Fault ';
|
}
|
},
|
mouseClick() {
|
this.fullscreenLoading = true;
|
this.dialogVisible = true;
|
this.fullscreenLoading = false;
|
},
|
start() {
|
this.fullscreenLoading = true;
|
this.http.post("api/DeviceInfo/StackerHandTask", this.form)
|
.then((x) => {
|
if (!x.status) {
|
this.$message.error(x.message);
|
} else {
|
this.$Message.success("堆垛机命令已下发");
|
// $vue.success("成功.");
|
this.show = false;
|
$vue.refresh();
|
}
|
})
|
.finally(() => {
|
this.fullscreenLoading = false;
|
});
|
}, reset() {
|
this.fullscreenLoading = true;
|
this.http.post("api/DeviceInfo/StackerReset?DeviceCode=" + this.form.DeviceCode)
|
.then((x) => {
|
if (!x.status) {
|
this.$message.error(x.message);
|
} else {
|
this.$Message.success("复位成功");
|
// $vue.success("成功.");
|
this.show = false;
|
$vue.refresh();
|
}
|
})
|
.finally(() => {
|
this.fullscreenLoading = false;
|
});
|
},
|
|
emergencyStop() {
|
this.fullscreenLoading = true;
|
this.http.post("api/DeviceInfo/StackerEmergencyStop?DeviceCode=" + this.form.DeviceCode)
|
.then((x) => {
|
if (!x.status) {
|
this.$message.error(x.message);
|
} else {
|
this.$Message.success("急停已按下");
|
// $vue.success("成功.");
|
// this.show = false;
|
// $vue.refresh();
|
}
|
})
|
.finally(() => {
|
this.fullscreenLoading = false;
|
});
|
}
|
},
|
};
|
</script>
|
|
<style scoped>
|
.line-container {
|
position: relative;
|
height: 20px;
|
background-color: #ecf5ff;
|
width: 960px;
|
}
|
|
.line {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 1px;
|
background-color: #a0cfff;
|
}
|
|
.dot-Running {
|
position: absolute;
|
top: -5px;
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
background-color: #409eff;
|
transition: transform 0.3s ease;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 9px;
|
font-weight: bold;
|
color: white;
|
}
|
|
.dot-Automatic {
|
position: absolute;
|
top: -5px;
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
background-color: #0df705;
|
transition: transform 0.3s ease;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 9px;
|
font-weight: bold;
|
color: white;
|
}
|
|
.dot-Fault {
|
position: absolute;
|
top: -5px;
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
background-color: #f80410;
|
transition: transform 0.3s ease;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 9px;
|
font-weight: bold;
|
color: white;
|
}
|
|
img {
|
width: 30px;
|
height: 25px;
|
}
|
|
.image-text {
|
position: absolute;
|
top: 5px;
|
/* left: 10px; */
|
color: white;
|
/* 文字颜色 */
|
font-size: 12px;
|
/* 字号大小 */
|
font-weight: bold;
|
/* 字体粗细 */
|
margin-left: 5px;
|
}
|
</style>
|
