<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-29: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="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="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">
|
<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-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: "",
|
}
|
};
|
},
|
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;
|
},
|
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;
|
},
|
},
|
};
|
</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>
|
