<template>
|
<div>
|
<el-row>
|
<template v-for="item in 56" :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 56" :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>
|
<div>
|
<el-row style="padding-top: 5px;">
|
<template v-for="item in 56" :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 56" :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="stackerItemInfo" label-position="left" label-width="100px" 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="设备编号：">
|
<!-- <el-input v-model="equipNo"></el-input> -->
|
<j-el-description :value="equipNo" 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="stackerItemInfo.r_Stack_EquipmentStatus" 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="stackerItemInfo.r_Stack_WorkPattern" 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="stackerItemInfo.r_Stack_tasknumber" 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="stackerItemInfo.r_Stack_jobstate" 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="stackerItemInfo.r_Stack_linenum + '-' + stackerItemInfo.r_Stack_olumnnum + '-' + stackerItemInfo.r_Stack_layernum"
|
type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</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 JElDescription from "./JElDescription";
|
export default {
|
components: {
|
JElDescription
|
},
|
data() {
|
return {
|
x: 0, // 初始x值
|
url: "api/Equipment/GetStackerInfoByNo",
|
dialogVisible: false,
|
stackerItemInfo: {
|
r_Stack_EquipmentStatus: "",
|
r_Stack_jobstate: "",
|
r_Stack_layernum: "",
|
r_Stack_linenum: "",
|
r_Stack_olumnnum: "",
|
r_Stack_tasknumber: "",
|
r_Stack_WalkingLaserValue: "",
|
r_Stack_WorkPattern: "",
|
}
|
};
|
},
|
props: {
|
equipNo: {
|
type: String,
|
default: "0",
|
},
|
},
|
computed: {
|
dotPosition() {
|
return -this.x;
|
},
|
},
|
mounted() {
|
this.moveDot(-this.x);
|
},
|
methods: {
|
moveDot(x) {
|
const dot = this.$refs.childDot;
|
dot.style.transform = `translateX(${-x}px)`;
|
},
|
mouseClick() {
|
this.fullscreenLoading = true;
|
this.dialogVisible = true;
|
// 处理点击事件
|
if (this.url != "") {
|
this.http.post(this.url + "?equipNo=" + this.equipNo, null, "")
|
.then((x) => {
|
if (x.status) {
|
this.stackerItemInfo = x.data;
|
} else {
|
this.$message({
|
type: "error",
|
message: x.message,
|
});
|
}
|
});
|
}
|
this.fullscreenLoading = false;
|
// this.dialogVisible = false;
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.line-container {
|
position: relative;
|
height: 10px;
|
background-color: #ecf5ff;
|
width: 1570px;
|
}
|
|
.line {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 1px;
|
background-color: #a0cfff;
|
}
|
|
.dot {
|
position: absolute;
|
top: -5px;
|
width: 20px;
|
height: 20px;
|
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;
|
/* background-image: url("../../public/堆垛机.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-position: center; */
|
}
|
|
img {
|
width: 28px;
|
height: 25px;
|
}
|
|
.image-text {
|
position: absolute;
|
top: 5px;
|
/* left: 10px; */
|
color: white;
|
/* 文字颜色 */
|
font-size: 12px;
|
/* 字号大小 */
|
font-weight: bold;
|
/* 字体粗细 */
|
margin-left: 5px;
|
}
|
</style>
|
