| <template> | 
|      <div class="Linebox"> | 
|     <div class="card"> | 
|       <div class="card-header"> | 
|         <div id="lines2" > | 
|           <div class="card-body">{{device.deviceName}}<br/> | 
|             -{{ device.data.childDeviceCode }}- | 
|           </div> | 
|         </div> | 
|       </div> | 
|       <div class="card-body"> | 
|         <ul class="list-group lis"> | 
|           <li class="list-group-item list-group-item-dark">读取信号</li> | 
|           <li class="list-group-item list-group-item-secondary">任务号:{{ device.data.commandAfter.conveyorLineTaskNum }}</li> | 
|           <li class="list-group-item list-group-item-secondary">托盘号:{{ device.data.commandAfter.conveyorLineBarcode }}</li> | 
|           <li class="list-group-item list-group-item-secondary">终点地址:{{ device.data.commandAfter.conveyorLineTargetAddress }}</li> | 
|           <li class="list-group-item list-group-item-secondary">是否有盘:{{ device.data.commandAfter.hasPallet }}</li> | 
|           <li class="list-group-item list-group-item-secondary">报警代码:{{ device.data.commandAfter.conveyorLineAlarm }}</li> | 
|           <li class="list-group-item list-group-item-secondary">请求反馈:{{ device.data.commandAfter.responState }}</li> | 
|           <li  :class="device.data.commandAfter.interactiveSignal !=0 ? 'list-group-item list-group-item-success'  :'list-group-item list-group-item-danger'">交互信号</li> | 
|         </ul>  | 
|       </div> | 
|     </div> | 
| </div> | 
| </template> | 
| <script setup> | 
| import { defineProps } from "vue"; | 
|   | 
| // 定义组件属性 | 
| const props = defineProps({ | 
|     device: { | 
|         type: Object, | 
|         required: true | 
|     } | 
| }); | 
|   | 
| // 获取信号类名 | 
| const getSignalClass = (signal) => { | 
|     // console.log("🚀 ~ getSignalClass ~ signal:", signal) | 
|     return signal !== true ? 'list-group-item list-group-item-danger' : 'list-group-item list-group-item-success'; | 
| }; | 
| </script> | 
|   | 
| <style scoped> | 
| .Stackerbox { | 
|   width: 220px; | 
|   float: left; | 
| } | 
| .Linebox { | 
|   width: 300px; | 
|   float: left; | 
| } | 
| .box1 { | 
|   float: left; | 
| } | 
| .card-body { | 
|   text-align: center; | 
|   border-radius: 6%; | 
| } | 
| .Stacker { | 
|   background-color: burlywood; | 
| } | 
| .lis { | 
|   float: left; | 
|   width: 266px; | 
| } | 
| </style> |