<template>
|
<div class="Stackerbox">
|
<div class="card">
|
<div class="card-header">
|
<div>
|
<div class="card-body Stacker">
|
{{ Stacker.deviceName }}
|
</div>
|
</div>
|
</div>
|
<div class="card-body">
|
<ul class="list-group">
|
<li class="list-group-item list-group-item-secondary">
|
任务号：{{ Stacker.data.currentTaskNum || '暂无任务号' }}
|
</li>
|
<li :class="getStatusClass(Stacker.data.stackerCraneAutoStatusDes)">
|
工作模式：{{ Stacker.data.stackerCraneAutoStatusDes }}
|
</li>
|
<li :class="getStatusClass(Stacker.data.stackerCraneStatusDes)">
|
设备状态：{{ Stacker.data.stackerCraneStatusDes }}
|
</li>
|
<li :class="getStatusClass(Stacker.data.stackerCraneWorkStatusDes)">
|
工作状态：{{ Stacker.data.stackerCraneWorkStatusDes }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { defineProps } from "vue";
|
|
// 定义组件属性
|
const props = defineProps({
|
Stacker: {
|
type: Object,
|
required: true
|
}
|
});
|
|
// 获取状态类名（优化状态判断）
|
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'; // 默认警告状态
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
