<template>
|
<div>
|
<div>
|
<div class="Stackerbox">
|
<div class="card">
|
<div class="card-header">
|
<div>
|
<div class="card-body Stacker">
|
{{ StackerOne.deviceName }}
|
</div>
|
</div>
|
</div>
|
<div class="card-body">
|
<ul class="list-group">
|
<li class="list-group-item list-group-item-secondary">
|
任务号：{{ StackerOne.data.currentTaskNum || '暂无任务号' }}
|
</li>
|
<li :class="getStatusClass(StackerOne.data.stackerCraneAutoStatusDes)">
|
工作模式：{{ StackerOne.data.stackerCraneAutoStatusDes }}
|
</li>
|
<li :class="getStatusClass(StackerOne.data.stackerCraneStatusDes)">
|
设备状态：{{ StackerOne.data.stackerCraneStatusDes }}
|
</li>
|
<li :class="getStatusClass(StackerOne.data.stackerCraneWorkStatusDes)">
|
工作状态：{{ StackerOne.data.stackerCraneWorkStatusDes }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
<device-line v-for="device in devices" :key="device.deviceName" :device="device" />
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, reactive, toRefs } from "vue";
|
import eventBus from "@/uitils/eventBus";
|
import DeviceLine from "@/components/DeviceLine.vue";
|
|
// 堆垛机
|
const StackerOne = reactive({
|
deviceName: "",
|
data: {
|
}
|
});
|
|
// 设备列表（修改重复设备名称）
|
const devices = reactive([
|
{ deviceName: "陈化出库输送线", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } },
|
{ deviceName: "陈化入库输送线", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } },
|
// { deviceName: "堆垛机1", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } },
|
// Add all devices similarly...
|
]);
|
|
// 获取状态类名（优化状态判断）
|
const getStatusClass = (status) => {
|
if (status === '正常' || status === '自动' || status === '待机') {
|
return 'list-group-item list-group-item-success';
|
}
|
if (status === '故障' || status === '停机') {
|
return 'list-group-item list-group-item-danger';
|
}
|
return 'list-group-item list-group-item-warning'; // 默认警告状态
|
};
|
|
// 监听设备数据变化
|
onMounted(() => {
|
eventBus.on('locationData', eventData => {
|
const device = devices.find(d => d.deviceName === eventData.deviceName);
|
if (device) {
|
// 使用扩展运算符更新对象属性，保持响应性
|
device.data = { ...device.data, ...eventData.data };
|
}
|
});
|
});
|
</script>
|
<style scoped>
|
.Stackerbox {
|
width: 220px;
|
float: left;
|
}
|
|
.Linebox {
|
width: 500px;
|
float: left;
|
}
|
|
.box1 {
|
float: left;
|
}
|
|
.card-body {
|
text-align: center;
|
border-radius: 6%;
|
}
|
|
.Stacker {
|
background-color: burlywood;
|
}
|
|
.lis {
|
float: left;
|
width: 233px;
|
}
|
</style>
|
