|  |  | 
 |  |  |     <link rel="stylesheet" href="../../static/wms/layui/css/layui.css" media="all"> | 
 |  |  |     <link rel="stylesheet" href="../../static/wms/css/cool.css" media="all"> | 
 |  |  |     <link rel="stylesheet" href="../../static/wms/css/common.css" media="all"> | 
 |  |  |  | 
 |  |  | <!--    <script src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>--> | 
 |  |  | <!--    <script src="../../static/wcs/js/layer/layer.js"></script>--> | 
 |  |  |     <script type="text/javascript" src="../../static/wms/js/jquery/jquery-3.3.1.min.js"></script> | 
 |  |  |     <script type="text/javascript" src="../../static/wms/layui/layui.js" charset="utf-8"></script> | 
 |  |  |     <script type="text/javascript" src="../../static/wms/js/common.js" charset="utf-8"></script> | 
 |  |  | 
 |  |  |                 <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!-- 货架 + 堆垛机 + 入库站点 --> | 
 |  |  |         <div class="main-part"> | 
 |  |  |  | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |  | 
 |  |  | <!--        <!–设备列表–>--> | 
 |  |  | <!--        <div class="device-info">--> | 
 |  |  | 
 |  |  | <!--        </div>--> | 
 |  |  |  | 
 |  |  |         <div id="body"> | 
 |  |  |  | 
 |  |  |             <!-- 总开关 --> | 
 |  |  |             <div class="system-state"> | 
 |  |  |                 <div class="body-head">总开关</div> | 
 |  |  | 
 |  |  |                     <span class="site-unauto">非自动/手动</span> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="bar-code"> | 
 |  |  |                 <div class="body-head" id="code">条码扫描器</div> | 
 |  |  |                 <div class="tablebox"> | 
 |  |  |                     <div class="table-head"> | 
 |  |  |                         <li><span>条码名称</span><span class="right">扫码时间</span></li> | 
 |  |  |                     </div> | 
 |  |  |                     <div id="barcode1" class="table-body"> | 
 |  |  | <!--            <div class="bar-code">--> | 
 |  |  | <!--                <div class="body-head" id="code">条码扫描器</div>--> | 
 |  |  | <!--                <div class="tablebox">--> | 
 |  |  | <!--                    <div class="table-head">--> | 
 |  |  | <!--                        <li><span>条码名称</span><span class="right">扫码时间</span></li>--> | 
 |  |  | <!--                    </div>--> | 
 |  |  | <!--                    <div id="barcode1" class="table-body">--> | 
 |  |  |  | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="tablebox"> | 
 |  |  |                     <div class="table-head"> | 
 |  |  |                         <li><span>条码名称</span><span class="right">扫码时间</span></li> | 
 |  |  |                     </div> | 
 |  |  |                     <div id="barcode2" class="table-body"> | 
 |  |  | <!--                    </div>--> | 
 |  |  | <!--                </div>--> | 
 |  |  | <!--                <div class="tablebox">--> | 
 |  |  | <!--                    <div class="table-head">--> | 
 |  |  | <!--                        <li><span>条码名称</span><span class="right">扫码时间</span></li>--> | 
 |  |  | <!--                    </div>--> | 
 |  |  | <!--                    <div id="barcode2" class="table-body">--> | 
 |  |  |  | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="tablebox"> | 
 |  |  |                     <div class="table-head"> | 
 |  |  |                         <li><span>条码名称</span><span class="right">扫码时间</span></li> | 
 |  |  |                     </div> | 
 |  |  |                     <div id="barcode3" class="table-body"> | 
 |  |  | <!--                    </div>--> | 
 |  |  | <!--                </div>--> | 
 |  |  | <!--                <div class="tablebox">--> | 
 |  |  | <!--                    <div class="table-head">--> | 
 |  |  | <!--                        <li><span>条码名称</span><span class="right">扫码时间</span></li>--> | 
 |  |  | <!--                    </div>--> | 
 |  |  | <!--                    <div id="barcode3" class="table-body">--> | 
 |  |  |  | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  | <!--                    </div>--> | 
 |  |  | <!--                </div>--> | 
 |  |  | <!--            </div>--> | 
 |  |  |         </div> | 
 |  |  |         <!-- 堆垛机弹窗 --> | 
 |  |  |         <div id="crnWindow" style="display: none;" class="animate__animated animate__fadeIn"> | 
 |  |  | 
 |  |  |                         <span>堆垛机号:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="crnNo" value=""> | 
 |  |  |                         <input type="text" name="crnNo" value="" id="crnNo"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 工作号 --> | 
 |  |  | 
 |  |  |                         <input type="text" name="error" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 操作按钮 --> | 
 |  |  |                 <div class="form-item" style="display: flex;"> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <div>入库:开<input type="radio" name="pakIn" id="pakInY" value="1"> 关<input type="radio" name="pakIn" id="pakInN" value="0"/></div> | 
 |  |  |                         <div>出库:开<input type="radio" name="pakOut" id="pakOutY" value="1"> 关<input type="radio" name="pakOut" id="pakOutN" value="0"/></div> | 
 |  |  |                     </div> | 
 |  |  |                     <div><a id="crnCommand" class="layui-btn">下发命令</a></div> | 
 |  |  |                 </div> | 
 |  |  |             </form> | 
 |  |  |         </div> | 
 |  |  |         <!-- 输送设备弹窗 --> | 
 |  |  | 
 |  |  |                         <span>设备号:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="siteId" value=""> | 
 |  |  |                         <input type="text" name="siteId" value="" id="devpSiteId"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 工作号 --> | 
 |  |  | 
 |  |  |                         <span>工作号:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="workNo" value=""> | 
 |  |  |                         <input type="text" name="workNo" value="" id="devpWorkNo"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 工作状态 --> | 
 |  |  | 
 |  |  |                         <span>目标站:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="staNo" value=""> | 
 |  |  |                         <input type="text" name="staNo" value="" id="devpStaNo"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 源库位 --> | 
 |  |  | 
 |  |  |                         <input type="text" name="locNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |  | 
 |  |  |                 <!-- 操作按钮 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <a id="devpCommand" class="layui-btn">下发命令</a> | 
 |  |  |                 </div> | 
 |  |  |             </form> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | 
 |  |  |             }, | 
 |  |  |             method: 'post', | 
 |  |  |             success: function (res) { | 
 |  |  |                 console.log(res) | 
 |  |  |                 for (var val in res.data) { | 
 |  |  |                     var find = $("#crnWindow").find(":input[name='" + val + "']"); | 
 |  |  |                     if (find[0].type === 'text') { | 
 |  |  |                         find.val(res.data[val]); | 
 |  |  |                     } else if (find[0].type === 'checkbox') { | 
 |  |  |                         find.attr("checked", res.data[val] === 'Y'); | 
 |  |  |                     if (val === "inEnable") { | 
 |  |  |                         if (res.data[val] === 'Y') { | 
 |  |  |                             $("#pakInY").prop("checked", true); | 
 |  |  |                         }else{ | 
 |  |  |                             $("#pakInN").prop("checked", true); | 
 |  |  |                         } | 
 |  |  |                     }else if (val === "outEnable") { | 
 |  |  |                         if (res.data[val] === 'Y') { | 
 |  |  |                             $("#pakOutY").prop("checked", true); | 
 |  |  |                         }else{ | 
 |  |  |                             $("#pakOutN").prop("checked", true); | 
 |  |  |                         } | 
 |  |  |                     }else { | 
 |  |  |                         var find = $("#crnWindow").find(":input[name='" + val + "']"); | 
 |  |  |                         if (find[0].type === 'text') { | 
 |  |  |                             find.val(res.data[val]); | 
 |  |  |                         } else if (find[0].type === 'checkbox') { | 
 |  |  |                             find.attr("checked", res.data[val] === 'Y'); | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  | 
 |  |  |     // 初始化 | 
 |  |  |     getSitesInfo(); | 
 |  |  |     getCrnInfo(); | 
 |  |  |     getHoistInfo(); | 
 |  |  |     getSystemRunningStatus(); | 
 |  |  |     getBarcodeInfo(); | 
 |  |  |     getScaleInfo(); | 
 |  |  | 
 |  |  |     }, 1000); | 
 |  |  |     setInterval(function () { | 
 |  |  |         getSitesInfo(); | 
 |  |  |         getHoistInfo(); | 
 |  |  |     }, 3000); | 
 |  |  |  | 
 |  |  |     // 系统运行开关 | 
 |  |  | 
 |  |  |                             siteEl.html(sites[i].siteId); | 
 |  |  |                         } | 
 |  |  |                         // RGV位置 | 
 |  |  |                         if(sites[i].siteId === '112' || sites[i].siteId === '212'){ | 
 |  |  |                         if(sites[i].siteId === '1' || sites[i].siteId === '2'|| sites[i].siteId === '3' || sites[i].siteId === '4'){ | 
 |  |  |                             carAnimate(Number(sites[i].siteId), Number(sites[i].nearbySta)); | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 扫码器实时数据获取 | 
 |  |  |     function getHoistInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/console/latest/data/hoist", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     var hoists = res.data; | 
 |  |  |                     for (var i = 0; i < hoists.length; i++) { | 
 |  |  |                         $("#hoist-"+hoists[i].hoistId).html(hoists[i].place ? hoists[i].place : "--"); | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  |                 } else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 扫码器实时数据获取 | 
 |  |  |     function getBarcodeInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/console/latest/data/barcode", | 
 |  |  | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     var barcodes = res.data; | 
 |  |  |                     for (var i = 0; i < barcodes.length; i++) { | 
 |  |  |                         $("#code-decoder-data-" + barcodes[i].barcodeId).html(barcodes[i].codeValue); | 
 |  |  |                         $("#barcode-"+barcodes[i].barcodeId).html(barcodes[i].codeValue ? barcodes[i].codeValue : "--"); | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  | 
 |  |  |     // 小车偏移动画 | 
 |  |  |     function carAnimate(id, target) { | 
 |  |  |         var targetTop = 0; | 
 |  |  |         if (id === 112) { | 
 |  |  |         var targetLeft = 1489; | 
 |  |  |         // console.log(id+" ....>>>"+target) | 
 |  |  |             switch (target) { | 
 |  |  |                 case 1: | 
 |  |  |                     targetTop += 313; | 
 |  |  |                     break; | 
 |  |  |                 case 2: | 
 |  |  |                     targetTop += 313; | 
 |  |  |                     break; | 
 |  |  |                 case 3: | 
 |  |  |                     targetTop += 256; | 
 |  |  |                     targetTop += 67; | 
 |  |  |                     break; | 
 |  |  |                 case 4: | 
 |  |  |                     targetTop += 226; | 
 |  |  |                 case 9: | 
 |  |  |                     targetTop += 92; | 
 |  |  |                     break; | 
 |  |  |                 case 5: | 
 |  |  |                     targetTop += 168; | 
 |  |  |                 case 6: | 
 |  |  |                     targetTop += 168; | 
 |  |  |                 case 14: | 
 |  |  |                     targetTop += 115; | 
 |  |  |                     break; | 
 |  |  |                 case 19: | 
 |  |  |                     targetTop += 140; | 
 |  |  |                     break; | 
 |  |  |                 case 26: | 
 |  |  |                     targetTop += 160; | 
 |  |  |                     break; | 
 |  |  |                 case 31: | 
 |  |  |                     targetTop += 183; | 
 |  |  |                     break; | 
 |  |  |                 case 37: | 
 |  |  |                     targetTop += 208; | 
 |  |  |                     break; | 
 |  |  |                 case 42: | 
 |  |  |                     targetTop += 231; | 
 |  |  |                     break; | 
 |  |  |                 case 49: | 
 |  |  |                     targetTop += 252; | 
 |  |  |                     break; | 
 |  |  |                 case 54: | 
 |  |  |                     targetTop += 275; | 
 |  |  |                     break; | 
 |  |  |                 case 60: | 
 |  |  |                     targetTop += 300; | 
 |  |  |                     break; | 
 |  |  |                 case 65: | 
 |  |  |                     targetTop += 330; | 
 |  |  |                     break; | 
 |  |  |                 case 72: | 
 |  |  |                     targetTop += 366; | 
 |  |  |                     break; | 
 |  |  |                 case 77: | 
 |  |  |                     targetTop += 389; | 
 |  |  |                     break; | 
 |  |  |                 case 83: | 
 |  |  |                     targetTop += 414; | 
 |  |  |                     break; | 
 |  |  |                 case 88: | 
 |  |  |                     targetTop += 445; | 
 |  |  |                     break; | 
 |  |  |                 case 95: | 
 |  |  |                     targetTop += 480; | 
 |  |  |                     break; | 
 |  |  |                 case 100: | 
 |  |  |                     targetTop += 503; | 
 |  |  |                     break; | 
 |  |  |                 case 107: | 
 |  |  |                     targetTop += 528; | 
 |  |  |                     break; | 
 |  |  |                 case 110: | 
 |  |  |                     targetTop += 570; | 
 |  |  |                     break; | 
 |  |  |                 case 118: | 
 |  |  |                     targetTop += 594; | 
 |  |  |                     break; | 
 |  |  |                 case 123: | 
 |  |  |                     targetTop += 617; | 
 |  |  |                     break; | 
 |  |  |                 case 130: | 
 |  |  |                     targetTop += 642; | 
 |  |  |                     break; | 
 |  |  |                 case 156: | 
 |  |  |                     targetTop += 700; | 
 |  |  |                     break; | 
 |  |  |                 case 161: | 
 |  |  |                     targetTop += 712; | 
 |  |  |                     break; | 
 |  |  |                 case 168: | 
 |  |  |                     targetTop += 725; | 
 |  |  |                     break; | 
 |  |  |                 case 186: | 
 |  |  |                     targetTop += 770; | 
 |  |  |                     break; | 
 |  |  |                 case 191: | 
 |  |  |                     targetTop += 782; | 
 |  |  |                     break; | 
 |  |  |                 case 197: | 
 |  |  |                     targetTop += 795; | 
 |  |  |                     break; | 
 |  |  |                 default: | 
 |  |  |                     return; | 
 |  |  |                    break; | 
 |  |  |             } | 
 |  |  |         } else if (id === 212) { | 
 |  |  |             switch (target) { | 
 |  |  |                 case 1: | 
 |  |  |                     targetTop += 313; | 
 |  |  |                     break; | 
 |  |  |                 case 2: | 
 |  |  |                     targetTop += 313; | 
 |  |  |                     break; | 
 |  |  |                 case 3: | 
 |  |  |                     targetTop += 256; | 
 |  |  |                     break; | 
 |  |  |                 case 4: | 
 |  |  |                     targetTop += 226; | 
 |  |  |                     break; | 
 |  |  |                 case 5: | 
 |  |  |                     targetTop += 168; | 
 |  |  |                 case 6: | 
 |  |  |                     targetTop += 168; | 
 |  |  |                     break; | 
 |  |  |                 default: | 
 |  |  |                     return; | 
 |  |  |             if (target === 200){ | 
 |  |  |                 targetTop += 830; | 
 |  |  |                 targetLeft += 26; | 
 |  |  |             } | 
 |  |  |         } else { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         $("#site-" + id).animate({top: targetTop + 'px'}, 1000); | 
 |  |  |             if (target === 300){ | 
 |  |  |                 targetTop += 41; | 
 |  |  |                 targetLeft += 26; | 
 |  |  |             } | 
 |  |  |             if (target > 0 && target<200 && targetTop === 0){ | 
 |  |  |                 var location =  100 - (target/2); | 
 |  |  |                 var px = 830-41; | 
 |  |  |                 targetTop += 41 + (px - px* (location/100)); | 
 |  |  |             } | 
 |  |  |             if (target > 200 && target<300){ | 
 |  |  |                 targetLeft += 45; | 
 |  |  |                  var location =  300 - target; | 
 |  |  |                  var px = 830-41; | 
 |  |  |                 targetTop += 41 + px* (location/100); | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |         $("#site-" + id).animate({top: targetTop + 'px',left:targetLeft+'px'}, 1000); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     //下发输送线命令 | 
 |  |  |     $("#devpCommand").on("click", () => { | 
 |  |  |         let siteId = $("#devpSiteId").val()//设备id | 
 |  |  |         let wrkNo = $("#devpWorkNo").val()//工作号 | 
 |  |  |         let staNo = $("#devpStaNo").val()//目标站 | 
 |  |  |  | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+"/site/detl/update", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             data: { | 
 |  |  |                 devNo: siteId, | 
 |  |  |                 workNo: wrkNo, | 
 |  |  |                 staNo: staNo, | 
 |  |  |             }, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                     layer.msg("下发成功",{icon: 1,}); | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     top.location.href = baseUrl+"/"; | 
 |  |  |                 }else { | 
 |  |  |                     layer.msg(res.msg, {icon: 2}); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     //下发堆垛机命令 | 
 |  |  |     $("#crnCommand").on("click", () => { | 
 |  |  |         let crnNo = $("#crnNo").val()//设备id | 
 |  |  |         var pakIn = $('input[name="pakIn"]:checked').val(); | 
 |  |  |         var pakOut = $('input[name="pakOut"]:checked').val(); | 
 |  |  |  | 
 |  |  |         console.log(pakIn,pakOut) | 
 |  |  |  | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/basCrnp/update/auth", | 
 |  |  |             headers: { | 
 |  |  |                 'token': localStorage.getItem('token') | 
 |  |  |             }, | 
 |  |  |             data: { | 
 |  |  |                 crnNo: crnNo, | 
 |  |  |                 inEnable: pakIn == 1 ? "Y" : "N", | 
 |  |  |                 outEnable: pakOut == 1 ? "Y" : "N" | 
 |  |  |             }, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                     layer.msg("下发成功",{icon: 1,}); | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     top.location.href = baseUrl+"/"; | 
 |  |  |                 }else { | 
 |  |  |                     layer.msg(res.msg, {icon: 2}); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  | </script> |