#

Junjie

2025-11-07 b890d1c574d3d8332def7f4590508a7918139ae0

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
85
86
87
Vue.component('watch-crn-card', {
    template: `
    <div>
        <div>堆垛机监控</div>
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(item) in crnList" :name="item.crnNo">
            <template slot="title">
                <div style="width: 100%;display: flex;">
                   <div style="width: 50%;">{{ item.crnNo }}号堆垛机</div>
                   <div style="width: 50%;text-align: right;">
                      <el-tag v-if="item.deviceStatus == 'AUTO'" type="success" size="small">自动</el-tag>
                      <el-tag v-else-if="item.deviceStatus == 'WORKING'" size="small">作业中</el-tag>
                      <el-tag v-else-if="item.deviceStatus == 'ERROR'" type="danger" size="small">故障</el-tag>
                      <el-tag v-else type="warning" size="small">离线</el-tag>
                   </div>
                </div>
            </template>
            <el-descriptions border direction="vertical">
                <el-descriptions-item label="编号">{{ item.crnNo }}</el-descriptions-item>
                <el-descriptions-item label="工作号">{{ item.workNo }}</el-descriptions-item>
                <el-descriptions-item label="模式">{{ item.mode }}</el-descriptions-item>
                <el-descriptions-item label="状态">{{ item.status }}</el-descriptions-item>
                <el-descriptions-item label="源库位">{{ item.sourceLocNo }}</el-descriptions-item>
                <el-descriptions-item label="目标库位">{{ item.locNo }}</el-descriptions-item>
                <el-descriptions-item label="是否有物">{{ item.loading }}</el-descriptions-item>
                <el-descriptions-item label="列">{{ item.bay }}</el-descriptions-item>
                <el-descriptions-item label="层">{{ item.lev }}</el-descriptions-item>
                <el-descriptions-item label="货叉定位">{{ item.forkOffset }}</el-descriptions-item>
                <el-descriptions-item label="载货台定位">{{ item.liftPos }}</el-descriptions-item>
                <el-descriptions-item label="走行在定位">{{ item.walkPos }}</el-descriptions-item>
                <el-descriptions-item label="走行速度（m/min)">{{ item.xspeed }}</el-descriptions-item>
                <el-descriptions-item label="升降速度（m/min)">{{ item.yspeed }}</el-descriptions-item>
                <el-descriptions-item label="叉牙速度（m/min)">{{ item.zspeed }}</el-descriptions-item>
                <el-descriptions-item label="走行距离(Km)">{{ item.xdistance }}</el-descriptions-item>
                <el-descriptions-item label="升降距离(Km)">{{ item.ydistance }}</el-descriptions-item>
                <el-descriptions-item label="走行时长(H)">{{ item.xDuration }}</el-descriptions-item>
                <el-descriptions-item label="升降时长(H)">{{ item.yduration }}</el-descriptions-item>
                <el-descriptions-item label="故障代码">{{ item.warnCode }}</el-descriptions-item>
                <el-descriptions-item label="故障描述">{{ item.alarm }}</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
    </div>
    `,
    props: ['param'],
    data() {
        return {
            crnList: [],
            activeNames: ''
        }
    },
    created() {
        setInterval(() => {
            this.getCrnStateInfo()
        },1000)
    },
    watch: {
        param: {
            handler(newVal, oldVal) {
                if(newVal.crnNo != 0) {
                    this.activeNames = newVal.crnNo
                }
            },
            deep: true,       // 深度监听嵌套属性
            immediate: true   // 立即触发一次（可选）
        }
    },
    methods: {
        getCrnStateInfo() {
            let that = this
            $.ajax({
                url: baseUrl + "/crn/table/crn/state",
                headers: {
                    'token': localStorage.getItem('token')
                },
                method: "post",
                success: (res) => {
                    // 堆垛机信息表获取
                    if (res.code == 200) {
                        let list = res.data;
                        that.crnList = list;
                    }
                }
            })
        },
    }
});