<template>
|
<div :class="update()" :style="{ left: left, top: top, }" @click="mouseClick"
|
v-loading.fullscreen.lock="fullscreenLoading" style="">
|
<img v-if="imgType === '2'" src="../../public/lines.png" />
|
<img v-if="imgType === '1'" src="../../public/lines2.png" />
|
<label v-if="equipNo" class="equip-no">{{ equipNo }}</label>
|
</div>
|
|
<!-- <el-dialog v-model="dialogVisible" title="信息查看" :before-close="handleClose">
|
<el-form ref="$form" :model="lineItemInfo" 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="设备编号：">
|
<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="lineItemInfo.r_Line_HasPallet" 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="lineItemInfo.r_Line_Barcode" 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="lineItemInfo.r_Line_ErrorCode" 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> -->
|
<!-- <el-dialog v-model="dialogVisible" title="信息查看" :before-close="handleClose">
|
<el-row>
|
<el-col :span="12">是否有盘:</el-col>
|
<el-col :span="12">{{ lineItemInfo.r_Line_HasPallet }}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">托盘条码</el-col>
|
<el-col :span="12">{{ lineItemInfo.r_Line_Barcode }}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">目标位置</el-col>
|
<el-col :span="12">{{ lineItemInfo.r_Line_Target }}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">任务号</el-col>
|
<el-col :span="12">{{ lineItemInfo.r_Line_TaskNum }}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">报警代码</el-col>
|
<el-col :span="12">{{ lineItemInfo.r_Line_ErrorCode }}</el-col>
|
</el-row>
|
<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 { defineComponent } from "vue";
|
import JElDescription from "./JElDescription";
|
export default defineComponent({
|
components: {
|
JElDescription
|
},
|
props: {
|
equipNoFontColor: {
|
type: String,
|
default: "blue",
|
},
|
equipNo: {
|
type: String,
|
default: "0",
|
},
|
imgType: {
|
type: String,
|
default: "1",
|
},
|
positionX: {
|
type: Int32Array,
|
default: 1,
|
},
|
positionY: {
|
type: Int32Array,
|
default: 1,
|
},
|
url: {
|
type: String,
|
default: "",
|
},
|
condition:{
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
left: "20px",
|
top: "260px",
|
dialogVisible: false,
|
lineItemInfo: {
|
r_Line_Barcode: "",
|
r_Line_HasPallet: "",
|
r_Line_TaskNum: "",
|
r_Line_ErrorCode: "",
|
r_Line_Target: "",
|
},
|
};
|
},
|
mounted() {
|
const axisX = (this.positionX - 1) * 40 + 100;
|
const axisY = (this.positionY - 1) + 50;
|
this.$nextTick(() => {
|
this.left = `${axisX}px`;
|
this.top = `${axisY}px`;
|
});
|
},
|
methods: {
|
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.lineItemInfo = x.data;
|
} else {
|
this.$message({
|
type: "error",
|
message: x.message,
|
});
|
}
|
});
|
}
|
this.fullscreenLoading = false;
|
// this.dialogVisible = false;
|
},
|
update(){
|
return !this.condition ? 'custom-img' : 'custom-img-color'
|
}
|
},
|
});
|
</script>
|
|
<style scoped>
|
.custom-img {
|
position: relative;
|
display: inline-block;
|
/* background-color: #d9ecff ; */
|
}
|
.custom-img-color {
|
position: relative;
|
display: inline-block;
|
background-color: #409eff ;
|
color: white;
|
text-align: center;
|
}
|
|
.custom-img-color::before {
|
content: "";
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
background-color: #409eff;
|
border-radius: 50%; /* 创建一个圆形的镂空效果 */
|
}
|
|
.custom-img img {
|
width: 40px;
|
height: 40px;
|
}
|
.custom-img-color img {
|
width: 40px;
|
height: 40px;
|
}
|
|
.equip-no {
|
position: absolute;
|
top: 15px;
|
font-size: 12px;
|
margin-left: -35px;
|
}
|
</style>
|
