<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">{{ ConveyorLineInfo.TaskNum || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">是否有盘</span>
|
<span class="item-value">{{ ConveyorLineInfo.HasGoods || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">托盘条码</span>
|
<span class="item-value">{{ ConveyorLineInfo.PalletCode || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">状态</span>
|
<span :class="['item-value', statusClass]">{{ ConveyorLineInfo.Status || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">命令</span>
|
<span class="item-value">{{ ConveyorLineInfo.Command || '无' }}</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: Int32Array,
|
default: 1,
|
},
|
positionY: {
|
type: Int32Array,
|
default: 1,
|
},
|
url: {
|
type: String,
|
default: "",
|
},
|
condition: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
left: "500px",
|
top: "400px",
|
dialogVisible: false,
|
fullscreenLoading: false,
|
timer1: null,
|
hasGoods: false,
|
isAlarm: false,
|
ConveyorLineInfo: {
|
TaskNum: "",
|
HasGoods: "",
|
Status: "",
|
Command: "",
|
PalletCode: "",
|
},
|
form: {
|
TaskType: "",
|
TargetAddress: "",
|
DeviceCode: "",
|
},
|
Map: {
|
Command: {
|
0: "无命令",
|
1: "非就绪（不执行下发命令）",
|
2: "取货站台工位就绪（有料）",
|
3: "放货站台工位就绪（无料）",
|
4: "放货站台工位就绪（有料）",
|
5: "扫码工位就绪",
|
6: "任务工位就绪",
|
7: "申请料框",
|
8: "料框到位",
|
9: "执行命令中"
|
},
|
Status: {
|
0: "脱机中",
|
1: "手动待机",
|
2: "自动待机",
|
3: "设备运行",
|
4: "设备故障"
|
}
|
},
|
};
|
},
|
mounted() {
|
const axisX = (this.positionX - 1) * 60 + 100;
|
const axisY = (this.positionY - 1) + 50;
|
this.$nextTick(() => {
|
this.left = `${axisX}px`;
|
this.top = `${axisY}px`;
|
});
|
// 启动定时器，每秒更新一次数据
|
this.timer1 = setInterval(() => {
|
this.updateAlarmStatus();
|
}, 1000);
|
},
|
beforeUnmount() {
|
// 清除定时器
|
if (this.timer1) {
|
clearInterval(this.timer1);
|
this.timer1 = null;
|
}
|
},
|
watch: {
|
'$root.conveyorLineDetails': {
|
handler() {
|
this.updateAlarmStatus();
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
methods: {
|
updateAlarmStatus() {
|
const equipNoStr = String(this.equipNo);
|
if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[equipNoStr]) {
|
const rawData = this.$root.conveyorLineDetails[equipNoStr];
|
this.hasGoods = rawData.inStock === '是' || false;
|
// 使用Home.vue中已经计算好的isAlarm值，或者根据状态判断
|
this.isAlarm = rawData.isAlarm || (rawData.status === 4) || false;
|
// 实时更新对话框中的数据
|
this.ConveyorLineInfo = {
|
TaskNum: rawData.taskNum || rawData.TaskNum || '无',
|
HasGoods: (rawData.taskNum && rawData.taskNum !== '无' && rawData.taskNum !== '0') ? '是' : '否',
|
Status: rawData.status || rawData.Status || '无',
|
Command: rawData.command || rawData.Command || '无',
|
PalletCode: rawData.palletCode || rawData.PalletCode || '无',
|
};
|
// 将命令代码转换为对应的中文描述
|
if (this.ConveyorLineInfo.Command !== '' && this.ConveyorLineInfo.Command !== '无') {
|
const commandCode = parseInt(this.ConveyorLineInfo.Command);
|
if (!isNaN(commandCode) && this.Map.Command && this.Map.Command[commandCode] !== undefined) {
|
this.ConveyorLineInfo.Command = this.Map.Command[commandCode];
|
}
|
}
|
// 将状态代码转换为对应的中文描述
|
if (this.ConveyorLineInfo.Status !== '' && this.ConveyorLineInfo.Status !== '无') {
|
const statusCode = parseInt(this.ConveyorLineInfo.Status);
|
if (!isNaN(statusCode) && this.Map.Status && this.Map.Status[statusCode] !== undefined) {
|
this.ConveyorLineInfo.Status = this.Map.Status[statusCode];
|
}
|
}
|
} else {
|
this.hasGoods = false;
|
this.isAlarm = false;
|
}
|
},
|
mouseClick() {
|
this.fullscreenLoading = true;
|
this.dialogVisible = true;
|
// 从全局变量中获取输送线详细信息
|
if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[this.equipNo]) {
|
// 先获取原始数据
|
const rawData = this.$root.conveyorLineDetails[this.equipNo];
|
|
// 复制数据到ConveyorLineInfo（模板中绑定的对象）
|
this.ConveyorLineInfo = {
|
TaskNum: rawData.taskNum || rawData.TaskNum || '无',
|
HasGoods: (rawData.taskNum && rawData.taskNum !== '无' && rawData.taskNum !== '0') ? '是' : '否',
|
Status: rawData.status || rawData.Status || '无',
|
Command: rawData.command || rawData.Command || '无',
|
PalletCode: rawData.palletCode || rawData.PalletCode || '无',
|
};
|
|
// 将命令代码转换为对应的中文描述
|
if (this.ConveyorLineInfo.Command !== '' && this.ConveyorLineInfo.Command !== '无') {
|
const commandCode = parseInt(this.ConveyorLineInfo.Command);
|
if (!isNaN(commandCode) && this.Map.Command && this.Map.Command[commandCode] !== undefined) {
|
this.ConveyorLineInfo.Command = this.Map.Command[commandCode];
|
}
|
}
|
|
// 将状态代码转换为对应的中文描述
|
if (this.ConveyorLineInfo.Status !== '' && this.ConveyorLineInfo.Status !== '无') {
|
const statusCode = parseInt(this.ConveyorLineInfo.Status);
|
if (!isNaN(statusCode) && this.Map.Status && this.Map.Status[statusCode] !== undefined) {
|
this.ConveyorLineInfo.Status = this.Map.Status[statusCode];
|
}
|
}
|
|
// 将报警代码转换为对应的中文描述
|
if (rawData.alarm !== '' && rawData.alarm !== '无') {
|
const alarmCode = parseInt(rawData.alarm);
|
if (!isNaN(alarmCode) && this.Map.ErrorCode && this.Map.ErrorCode[alarmCode] !== undefined) {
|
this.ConveyorLineInfo.Alarm = this.Map.ErrorCode[alarmCode];
|
}
|
}
|
} else {
|
// 如果没有数据，使用默认值
|
this.ConveyorLineInfo = {
|
TaskNum: '',
|
HasGoods: '',
|
Status: '',
|
Command: '',
|
PalletCode: '',
|
};
|
}
|
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;
|
// });
|
//},
|
startTimer() {
|
// 开启定时器，每3秒执行一次
|
this.timer1 = setInterval(() => {
|
this.updateAlarmStatus();
|
}, 1000);
|
},
|
},
|
computed: {
|
update() {
|
if (this.isAlarm) {
|
return 'custom-img-alarm';
|
}
|
// 使用中文状态值判断
|
const statusText = this.ConveyorLineInfo.Status;
|
// 状态为手动待机时，无论有无盘都显示蓝色
|
if (statusText === '手动待机') {
|
return 'custom-img-blue';
|
}
|
// 状态为自动待机或设备运行且有盘时显示绿色
|
if ((statusText === '自动待机' || statusText === '设备运行') && (this.hasGoods || this.ConveyorLineInfo.HasGoods === '是')) {
|
return 'custom-img-color';
|
}
|
return 'custom-img';
|
},
|
statusClass() {
|
const statusText = this.ConveyorLineInfo.Status;
|
if (statusText === '手动待机') {
|
return 'status-blue';
|
} else if (statusText === '自动待机' || statusText === '设备运行') {
|
return 'status-green';
|
} else if (statusText === '设备故障') {
|
return 'status-red';
|
}
|
return '';
|
}
|
}
|
});
|
</script>
|
|
<style scoped>
|
.custom-img {
|
position: relative;
|
display: inline-block;
|
/* background-color: #d9ecff ; */
|
}
|
|
.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: #ff0000;
|
color: white;
|
text-align: center;
|
}
|
|
.custom-img-blue {
|
position: relative;
|
display: inline-block;
|
background-color: #409eff;
|
color: white;
|
text-align: center;
|
}
|
|
.custom-img-blue img {
|
width: 80px;
|
height: 50px;
|
}
|
|
.custom-img-alarm img {
|
width: 80px;
|
height: 50px;
|
}
|
|
.custom-img img {
|
width: 80px;
|
height: 50px;
|
}
|
|
.custom-img-color img {
|
width: 80px;
|
height: 50px;
|
}
|
|
/* .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;
|
}
|
|
.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;
|
}
|
|
.status-blue {
|
color: #409eff !important;
|
font-weight: 600;
|
}
|
|
.status-green {
|
color: #67c23a !important;
|
font-weight: 600;
|
}
|
|
.status-red {
|
color: #f56c6c !important;
|
font-weight: 600;
|
}
|
</style>
|
