<template>
|
<div :class="update()" :style="{ left: left, top: top, marginBottom: 0 + 'px', marginTop: 15 + 'px' }"
|
@click="mouseClick" v-loading.fullscreen.lock="fullscreenLoading">
|
<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" :before-close="handleClose" width="520px" class="modern-dialog">
|
<div class="dialog-header">
|
<h3 class="dialog-title">输送线信息</h3>
|
</div>
|
<div class="dialog-content">
|
<div class="info-list">
|
<div class="info-item">
|
<span class="item-label">设备编号</span>
|
<span class="item-value">{{ equipNo || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">任务号</span>
|
<span class="item-value">{{ lineItemInfo.taskNum || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">是否有盘</span>
|
<span class="item-value">{{ lineItemInfo.inStock || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">RFID</span>
|
<span class="item-value">{{ lineItemInfo.rfid || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">申请</span>
|
<span class="item-value">{{ lineItemInfo.request || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">申请反馈</span>
|
<span class="item-value">{{ lineItemInfo.reresult || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">纸卷幅宽</span>
|
<span class="item-value">{{ lineItemInfo.width || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">报警信息</span>
|
<span class="item-value">{{ lineItemInfo.error || '无' }}</span>
|
</div>
|
</div>
|
</div>
|
</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: Number,
|
default: 1,
|
},
|
positionY: {
|
type: Number,
|
default: 1,
|
},
|
url: {
|
type: String,
|
default: "",
|
},
|
condition: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
left: "500px",
|
top: "400px",
|
dialogVisible: false,
|
fullscreenLoading: false,
|
isAlarm: false,
|
lineItemInfo: {
|
inStock: "",
|
taskNum: "",
|
rfid: "",
|
width: "",
|
request: "",
|
reresult: "",
|
error: "",
|
},
|
// 申请反馈状态跟踪
|
feedbackTracking: {
|
currentTaskNum: "", // 当前任务号
|
hasFeedback: false, // 是否已反馈过
|
lastFeedbackValue: "" // 上次反馈的值
|
},
|
form: {
|
TaskType: "",
|
TargetAddress: "",
|
DeviceCode: "",
|
},
|
};
|
},
|
mounted() {
|
const axisX = (this.positionX - 1) * 60 + 100;
|
const axisY = (this.positionY - 1) + 50;
|
this.$nextTick(() => {
|
this.left = `${axisX}px`;
|
this.top = `${axisY}px`;
|
});
|
|
// 监听全局conveyorLineDetails的变化
|
this.$watch(
|
() => this.$root.conveyorLineDetails,
|
() => {
|
this.updateAlarmStatus();
|
},
|
{ deep: true, immediate: true }
|
);
|
|
// 开启定时器，定期检查数据变化
|
this.timer = setInterval(() => {
|
this.updateAlarmStatus();
|
}, 1000); // 每1秒检查一次
|
},
|
methods: {
|
// 更新报警状态
|
updateAlarmStatus() {
|
const equipNoStr = String(this.equipNo);
|
if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[equipNoStr]) {
|
const rawData = this.$root.conveyorLineDetails[equipNoStr];
|
this.isAlarm = rawData.isAlarm || false;
|
|
// 获取当前任务号
|
const currentTaskNum = rawData.taskNum || '无';
|
|
// 检查任务号是否变化
|
if (currentTaskNum !== this.feedbackTracking.currentTaskNum) {
|
// 任务号变化，重置反馈状态
|
this.feedbackTracking.currentTaskNum = currentTaskNum;
|
this.feedbackTracking.hasFeedback = false;
|
this.feedbackTracking.lastFeedbackValue = "";
|
}
|
|
// 处理申请反馈逻辑
|
let reresultValue = rawData.reresult || '无';
|
|
// 如果收到了反馈值（非空非无）且还没有反馈过
|
if ((reresultValue !== '无' && reresultValue !== '' && reresultValue !== undefined) && !this.feedbackTracking.hasFeedback) {
|
// 记录已反馈
|
this.feedbackTracking.hasFeedback = true;
|
this.feedbackTracking.lastFeedbackValue = reresultValue;
|
}
|
|
// 如果已经反馈过，显示"已反馈"
|
if (this.feedbackTracking.hasFeedback) {
|
reresultValue = '已反馈';
|
}
|
|
// 更新lineItemInfo数据
|
this.lineItemInfo = {
|
taskNum: currentTaskNum,
|
inStock: rawData.inStock || '无',
|
rfid: rawData.rfid || '无',
|
width: rawData.width || '无',
|
request: rawData.request || '无',
|
reresult: reresultValue,
|
error: rawData.error || '无',
|
};
|
} else {
|
this.isAlarm = false;
|
this.lineItemInfo = {
|
taskNum: '',
|
inStock: '',
|
rfid: '',
|
width: '',
|
request: '',
|
reresult: '',
|
error: ''
|
};
|
}
|
},
|
// 组件销毁时清除定时器
|
beforeUnmount() {
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
},
|
mouseClick() {
|
this.fullscreenLoading = true;
|
this.dialogVisible = true;
|
// 从全局变量中获取输送线详细信息
|
const equipNoStr = String(this.equipNo);
|
if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[equipNoStr]) {
|
// 先获取原始数据
|
const rawData = this.$root.conveyorLineDetails[equipNoStr];
|
|
// 获取当前任务号
|
const currentTaskNum = rawData.taskNum || '无';
|
|
// 检查任务号是否变化（与updateAlarmStatus保持一致）
|
if (currentTaskNum !== this.feedbackTracking.currentTaskNum) {
|
this.feedbackTracking.currentTaskNum = currentTaskNum;
|
this.feedbackTracking.hasFeedback = false;
|
this.feedbackTracking.lastFeedbackValue = "";
|
}
|
|
// 处理申请反馈逻辑
|
let reresultValue = rawData.reresult || '无';
|
|
// 如果收到了反馈值（非空非无）且还没有反馈过
|
if ((reresultValue !== '无' && reresultValue !== '' && reresultValue !== undefined) && !this.feedbackTracking.hasFeedback) {
|
this.feedbackTracking.hasFeedback = true;
|
this.feedbackTracking.lastFeedbackValue = reresultValue;
|
}
|
|
// 如果已经反馈过，显示"已反馈"
|
if (this.feedbackTracking.hasFeedback) {
|
reresultValue = '已反馈';
|
}
|
|
// 复制数据到lineItemInfo（模板中绑定的对象）
|
this.lineItemInfo = {
|
taskNum: currentTaskNum,
|
inStock: rawData.inStock || '无',
|
rfid: rawData.rfid || '无',
|
width: rawData.width || '无',
|
request: rawData.request || '无',
|
reresult: reresultValue,
|
error: rawData.error || '无',
|
};
|
// 保存报警状态
|
this.isAlarm = rawData.isAlarm || false;
|
} else {
|
// 如果没有数据，使用默认值
|
this.lineItemInfo = {
|
taskNum: '',
|
inStock: '',
|
rfid: '',
|
width: '',
|
request: '',
|
reresult: '',
|
error: ''
|
};
|
this.isAlarm = false;
|
}
|
this.fullscreenLoading = false;
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.fullscreenLoading = false;
|
},
|
|
// SendCommand() {
|
// this.fullscreenLoading = true;
|
// this.form.DeviceCode=this.equipNo;
|
// this.http.post("api/DeviceInfo/ConveyorLineHandTask" ,this.form)
|
// .then((x) => {
|
// if (!x.status) {
|
// this.$message.error(x.message);
|
// } else {
|
// this.$Message.success(x.message);
|
// }
|
// })
|
// .finally(() => {
|
// this.fullscreenLoading = false;
|
// });
|
// },
|
// ConveyorLineReset() {
|
// this.fullscreenLoading = true;
|
// this.http.post("api/DeviceInfo/ConveyorLineReset?DeviceChildCode=" + this.equipNo, null, "")
|
// .then((x) => {
|
// if (!x.status) {
|
// this.$message.error(x.message);
|
// } else {
|
// this.$Message.success(x.message);
|
|
// }
|
// })
|
// .finally(() => {
|
// this.fullscreenLoading = false;
|
// });
|
// },
|
// ConveyorLineEmergencyStop() {
|
// this.fullscreenLoading = true;
|
// this.http.post("api/DeviceInfo/ConveyorLineEmergencyStop?DeviceChildCode=" + this.equipNo, null, "")
|
// .then((x) => {
|
// if (!x.status) {
|
// this.$message.error(x.message);
|
// } else {
|
// this.$Message.success(x.message);
|
|
// }
|
// })
|
// .finally(() => {
|
// this.fullscreenLoading = false;
|
// });
|
// },
|
// ConveyorLineReturn() {
|
// this.fullscreenLoading = true;
|
// this.http.post("api/DeviceInfo/ConveyorLineReturn?DeviceChildCode=" + this.equipNo, null, "")
|
// .then((x) => {
|
// if (!x.status) {
|
// this.$message.error(x.message);
|
// } else {
|
// this.$Message.success(x.message);
|
// }
|
// })
|
// .finally(() => {
|
// this.fullscreenLoading = false;
|
// });
|
// },
|
// ConveyorLineCancel() {
|
// this.fullscreenLoading = true;
|
// this.http.post("api/DeviceInfo/ConveyorLineCancel?DeviceChildCode=" + this.equipNo, null, "")
|
// .then((x) => {
|
// if (!x.status) {
|
// this.$message.error(x.message);
|
// } else {
|
// this.$Message.success(x.message);
|
// }
|
// })
|
// .finally(() => {
|
// this.fullscreenLoading = false;
|
// });
|
// },
|
// ConveyorLineInitialize() {
|
// this.fullscreenLoading = true;
|
// this.http.post("api/DeviceInfo/ConveyorLineInitialize?DeviceChildCode=" + this.equipNo, null, "")
|
// .then((x) => {
|
// if (!x.status) {
|
// this.$message.error(x.message);
|
// } else {
|
// this.$Message.success(x.message);
|
// }
|
// })
|
// .finally(() => {
|
// this.fullscreenLoading = false;
|
// });
|
// },
|
update() {
|
if (this.isAlarm) {
|
return 'custom-img-alarm';
|
} else if (this.lineItemInfo.inStock === '是') {
|
return 'custom-img-color';
|
} else {
|
return 'custom-img';
|
}
|
},
|
startTimer() {
|
// 开启定时器，每3秒执行一次
|
this.timer1 = setInterval(() => {
|
this.update();
|
}, 500);
|
},
|
},
|
});
|
</script>
|
|
<style scoped>
|
.custom-img {
|
position: relative;
|
display: inline-block;
|
}
|
|
.custom-img-color {
|
position: relative;
|
display: inline-block;
|
background-color: #05fa7f;
|
color: white;
|
text-align: center;
|
}
|
|
.custom-img-alarm {
|
position: relative;
|
display: inline-block;
|
background-color: #ff4d4f;
|
color: white;
|
text-align: center;
|
}
|
|
/* .custom-img-color::before {
|
content: "";
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
background-color: #05fa7f;
|
border-radius: 50%;
|
} */
|
|
.custom-img img {
|
width: 80px;
|
height: 50px;
|
}
|
|
.custom-img-color img {
|
width: 80px;
|
height: 50px;
|
}
|
|
.custom-img-alarm img {
|
width: 80px;
|
height: 50px;
|
}
|
|
.equip-no {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
font-size: 25px;
|
text-align: center;
|
width: 100%;
|
}
|
|
.modern-dialog {
|
border-radius: 16px !important;
|
overflow: hidden;
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
}
|
|
.modern-dialog .el-dialog__header {
|
display: none;
|
}
|
|
.modern-dialog .el-dialog__body {
|
padding: 0;
|
margin: 0;
|
}
|
|
.dialog-header {
|
background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
|
padding: 20px 24px;
|
text-align: center;
|
}
|
|
.dialog-title {
|
color: #fff;
|
font-size: 18px;
|
font-weight: 600;
|
margin: 0;
|
letter-spacing: 2px;
|
}
|
|
.dialog-content {
|
padding: 28px;
|
background: #f8fafc;
|
display: flex;
|
justify-content: center;
|
}
|
|
.info-list {
|
width: 100%;
|
max-width: 420px;
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.info-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 16px 20px;
|
background: #fff;
|
border-radius: 12px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
transition: all 0.3s ease;
|
}
|
|
.info-item:hover {
|
transform: translateX(4px);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
}
|
|
.item-label {
|
font-size: 14px;
|
color: #6b7280;
|
font-weight: 500;
|
min-width: 80px;
|
text-align: left;
|
}
|
|
.item-value {
|
font-size: 15px;
|
color: #1f2937;
|
font-weight: 500;
|
text-align: right;
|
flex: 1;
|
margin-left: 20px;
|
word-break: break-all;
|
padding-left: 20px;
|
border-left: 1px solid #e5e7eb;
|
}
|
</style>
|
