<!DOCTYPE html> 
 | 
<html lang="en"> 
 | 
  
 | 
<head> 
 | 
    <meta charset="UTF-8"> 
 | 
    <title>输送站点设备</title> 
 | 
    <link rel="stylesheet" href="../../static/wcs/css/element.css"> 
 | 
    <script type="text/javascript" src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script> 
 | 
    <script type="text/javascript" src="../../static/wcs/js/common.js"></script> 
 | 
    <script type="text/javascript" src="../../static/wcs/js/vue.min.js"></script> 
 | 
    <script type="text/javascript" src="../../static/wcs/js/element.js"></script> 
 | 
</head> 
 | 
  
 | 
<body> 
 | 
    <div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;"> 
 | 
        <div style="width: 100%;"> 
 | 
            <el-table ref="singleTable" :data="tableData" highlight-current-row @row-click="handleRowClick" 
 | 
                max-height="450" style="width: 100%"> 
 | 
                <el-table-column property="devNo" label="站号"> 
 | 
                </el-table-column> 
 | 
                <el-table-column property="workNo" label="工作号"> 
 | 
                </el-table-column> 
 | 
                <el-table-column property="locType1" label="高低库位"> 
 | 
                </el-table-column> 
 | 
                <el-table-column property="pakMk" label="入库标记"> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
        </div> 
 | 
  
 | 
        <div style="width: 100%;display: flex;justify-content: center;margin-top: 10px;"> 
 | 
            <div style="width: 55%;margin-right: 10px;"> 
 | 
                <el-card class="box-card"> 
 | 
                    <div slot="header" class="clearfix"> 
 | 
                        <span>设备调试</span> 
 | 
                    </div> 
 | 
                    <div> 
 | 
                        <el-form :model="formParam" label-position="top" :inline="true" class="demo-form-inline"> 
 | 
                            <el-form-item label="工作号"> 
 | 
                                <el-input v-model="formParam.workNo" placeholder="工作号"></el-input> 
 | 
                            </el-form-item> 
 | 
                            <el-form-item label="目标站"> 
 | 
                                <el-input v-model="formParam.staNo" placeholder="目标站"></el-input> 
 | 
                            </el-form-item> 
 | 
                            <el-form-item label="入库标记"> 
 | 
                                <el-input v-model="formParam.pakMk" placeholder="入库标记"></el-input> 
 | 
                            </el-form-item> 
 | 
                        </el-form> 
 | 
                        <el-form label-position="top" :inline="true" class="demo-form-inline"> 
 | 
                            <el-form-item label=""> 
 | 
                                <el-checkbox v-model="formParam.inEnable">可入</el-checkbox> 
 | 
                            </el-form-item> 
 | 
                            <el-form-item label=""> 
 | 
                                <el-checkbox v-model="formParam.outEnable">可出</el-checkbox> 
 | 
                            </el-form-item> 
 | 
                        </el-form> 
 | 
                        <div> 
 | 
                            <el-button @click="requestOperate('update')" type="primary">更新</el-button> 
 | 
                            <el-button @click="requestOperate('out')" type="warning">取货完成</el-button> 
 | 
                            <el-button @click="requestOperate('in')" type="warning">放货完成</el-button> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </el-card> 
 | 
            </div> 
 | 
            <div style="width: 45%;"> 
 | 
                <el-card class="box-card"> 
 | 
                    <div slot="header" class="clearfix"> 
 | 
                        <span>设备状态</span> 
 | 
                    </div> 
 | 
                    <div> 
 | 
                        <div v-if="currentIndex == null"> 
 | 
                            <el-empty description="请选择设备"></el-empty> 
 | 
                        </div> 
 | 
                        <div v-else> 
 | 
                            <el-descriptions :title="currentTitle" direction="vertical" :column="4" border> 
 | 
                                <el-descriptions-item label="站点">{{ tableData[currentIndex].devNo }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="工作号"> 
 | 
                                    {{ tableData[currentIndex].workNo }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="自动">{{ tableData[currentIndex].autoing }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="有物">{{ tableData[currentIndex].loading }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="可入">{{ tableData[currentIndex].inEnable }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="可出">{{ tableData[currentIndex].outEnable }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="入库标记">{{ tableData[currentIndex].pakMk }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="空板信号">{{ tableData[currentIndex].emptyMk }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="目标站">{{ tableData[currentIndex].staNo }} 
 | 
                                </el-descriptions-item> 
 | 
                                <el-descriptions-item label="高低库位">{{ tableData[currentIndex].locType1 }} 
 | 
                                </el-descriptions-item> 
 | 
                            </el-descriptions> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </el-card> 
 | 
            </div> 
 | 
        </div> 
 | 
    </div> 
 | 
    <script> 
 | 
        var app = new Vue({ 
 | 
            el: '#app', 
 | 
            data: { 
 | 
                tableData: [], 
 | 
                currentRow: null, 
 | 
                currentTitle: "未选择设备", 
 | 
                currentIndex: null, 
 | 
                formParam: { 
 | 
                    devNo: null, 
 | 
                    workNo: null, 
 | 
                    staNo: null, 
 | 
                    pakMk: null, 
 | 
                    inEnable: false, 
 | 
                    outEnable: false 
 | 
                } 
 | 
            }, 
 | 
            created() { 
 | 
                this.init() 
 | 
            }, 
 | 
            watch: { 
 | 
  
 | 
            }, 
 | 
            methods: { 
 | 
                init() { 
 | 
                    this.getTableData() 
 | 
  
 | 
                    setInterval(() => { 
 | 
                        this.getTableData() 
 | 
                    }, 1000) 
 | 
                }, 
 | 
                handleRowClick(row, col, event) { 
 | 
                    const index = this.tableData.indexOf(row) 
 | 
                    this.currentRow = row; 
 | 
                    this.currentIndex = index 
 | 
                    this.currentTitle = row.devNo + "站点" 
 | 
                     
 | 
                    this.formParam.devNo = row.devNo 
 | 
                    this.formParam.workNo = row.workNo 
 | 
                    this.formParam.staNo = row.staNo 
 | 
                    this.formParam.pakMk = row.pakMk 
 | 
                    this.formParam.inEnable = row.inEnable == "Y" ? true : false 
 | 
                    this.formParam.outEnable = row.outEnable == "Y" ? true : false 
 | 
                }, 
 | 
                getTableData() { 
 | 
                    let that = this; 
 | 
                    $.ajax({ 
 | 
                        url: baseUrl + "/site/list/auth", 
 | 
                        headers: { 
 | 
                            'token': localStorage.getItem('token') 
 | 
                        }, 
 | 
                        data: {}, 
 | 
                        dataType: 'json', 
 | 
                        contentType: 'application/json;charset=UTF-8', 
 | 
                        method: 'GET', 
 | 
                        success: function (res) { 
 | 
                            that.tableData = res.data 
 | 
                        } 
 | 
                    }); 
 | 
                }, 
 | 
                requestOperate(method) { 
 | 
                    let that = this 
 | 
                    that.$confirm('此操作存在风险,是否继续','提示',{ 
 | 
                        confirmButtonText: '确定', 
 | 
                        cancelButtonText: '取消', 
 | 
                        type: 'warning' 
 | 
                    }).then(()=>{ 
 | 
                        $.ajax({ 
 | 
                            url: baseUrl + "/site/detl/"+method, 
 | 
                            headers: { 
 | 
                                'token': localStorage.getItem('token') 
 | 
                            }, 
 | 
                            data: this.formParam, 
 | 
                            method: 'POST', 
 | 
                            success: function (res) { 
 | 
                                if (res.code == 200) { 
 | 
                                    that.$message({ 
 | 
                                        message: res.msg, 
 | 
                                        type: 'success' 
 | 
                                    }); 
 | 
                                } else { 
 | 
                                    that.$message({ 
 | 
                                        message: res.msg, 
 | 
                                        type: 'error' 
 | 
                                    }); 
 | 
                                } 
 | 
                            } 
 | 
                        }); 
 | 
                    }) 
 | 
  
 | 
                } 
 | 
            } 
 | 
        }) 
 | 
    </script> 
 | 
</body> 
 | 
  
 | 
</html> 
 |