1

huangxiaoqiang

2025-02-16 67844d0b962e62d65e5c118d3251aeeeda50810f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
    <div class="Linebox" >
        <div class="card">
            <div class="card-header">
                <div id="lines2">
                    <div class="card-body">{{ device.deviceName }}<br />
                        -{{ device.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.command.taskNum }}</li>
                    <li class="list-group-item list-group-item-secondary">托盘号：{{
                        device.data.command.barcode }}</li>
                    <li class="list-group-item list-group-item-secondary">终点地址：{{
                        device.data.command.targetAddress }}</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[6])">扫码站台入库请求</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[4])">堆垛机出库站台请求</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[2])">堆垛机入库站台请求</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[0])">线体出库口请求</li>
                </ul>
                <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.commandWrite.taskNum }}</li>
                    <li class="list-group-item list-group-item-secondary">托盘号：{{
                        device.data.commandWrite.barcode }}</li>
                    <li class="list-group-item list-group-item-secondary">终点地址：{{
                        device.data.commandWrite.targetAddress }}</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[7])">扫码站台入库请求</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[5])">堆垛机出库站台请求</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[3])">堆垛机入库站台请求</li>
                    <li :class="getSignalClass(device.data.writeInteractiveSignal[1])">线体出库口请求</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: 500px;
  float: left;
}
.box1{
  float: left;
}
.card-body{
  text-align: center;
  border-radius: 6% ;
}
.Stacker{
  background-color: burlywood;
}
.lis{
  float: left;
  width: 233px;
}
</style>