| <!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> |