|  |  | 
 |  |  | <!DOCTYPE html> | 
 |  |  | <html lang="en"> | 
 |  |  | <!--5层 28列 1120库位--> | 
 |  |  | <head> | 
 |  |  |     <meta charset="UTF-8"> | 
 |  |  |     <title>WCS控制中心</title> | 
 |  |  |     <meta name="renderer" content="webkit"> | 
 |  |  |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
 |  |  |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="../static/css/common.css"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="../static/css/console.css"> | 
 |  |  |     <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> | 
 |  |  |     <script type="text/javascript" src="../static/js/layer/layer.js"></script> | 
 |  |  |     <script type="text/javascript" src="../static/js/common.js"></script> | 
 |  |  |     <style> | 
 |  |  |         /* layer 深蓝色按钮修改 */ | 
 |  |  |         /*.layui-layer-lan .layui-layer-btn {*/ | 
 |  |  |             /*border-top: none;*/ | 
 |  |  |         /*}*/ | 
 |  |  |         .layui-layer-lan .layui-layer-btn a { | 
 |  |  |             background: #4476A7; | 
 |  |  |             border-color: #4476A7; | 
 |  |  |             color: #fff; | 
 |  |  |         } | 
 |  |  |         .layui-layer-lan .layui-layer-btn .layui-layer-btn1 { | 
 |  |  |             background: #fff; | 
 |  |  |             color: #333; | 
 |  |  |             border-color: #E9E7E7; | 
 |  |  |         } | 
 |  |  |         .layui-layer-lan .layui-layer-btn .layui-layer-btn1:hover { | 
 |  |  |             background-color: #f7f7f7; | 
 |  |  |         } | 
 |  |  |     </style> | 
 |  |  |     <title>自动仓库wcs系统</title> | 
 |  |  |     <link rel="stylesheet" href="../static/css/render.css"> | 
 |  |  |     <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> | 
 |  |  |     <script src="../static/js/layer/layer.js"></script> | 
 |  |  |     <!--地图json--> | 
 |  |  |     <script src="../static/js/console.map.js"></script> | 
 |  |  |     <script src="../static/js/console.js"></script> | 
 |  |  |     <script src="../static/js/common.js"></script> | 
 |  |  |  | 
 |  |  |  | 
 |  |  | </head> | 
 |  |  | <body> | 
 |  |  | <header> | 
 |  |  |     <!-- 系统运行状态 --> | 
 |  |  |     <div class="system-state"> | 
 |  |  |         <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div> | 
 |  |  |         <span id="system-run-desc">系统运行中...</span> | 
 |  |  |     </div> | 
 |  |  |     <div id="main"> | 
 |  |  |         <div class="head"> | 
 |  |  |             <div class="head-left"> | 
 |  |  |                 <h1>自动仓库WCS监控图</h1> | 
 |  |  |                 <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> | 
 |  |  |             </div> | 
 |  |  | <!--            <div class="head-right">--> | 
 |  |  | <!--                <img src="../static/images/zy-logo.png" alt="中扬" height="44" width="80">--> | 
 |  |  | <!--            </div>--> | 
 |  |  |         </div> | 
 |  |  |         <!-- 货架 + 堆垛机 + 入库站点 --> | 
 |  |  |         <div class="main-part"> | 
 |  |  |  | 
 |  |  |     <!-- 信息展示 --> | 
 |  |  |     <div class="data-window"> | 
 |  |  |         <!-- 标题 --> | 
 |  |  |         <h1>自动仓库 WCS 监控图</h1> | 
 |  |  |         </div> | 
 |  |  |         <div id="body"> | 
 |  |  |             <!-- 总开关 --> | 
 |  |  |             <div class="system-state"> | 
 |  |  |                 <div class="body-head">总开关</div> | 
 |  |  |                 <div class="switch"> | 
 |  |  |                     <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div> | 
 |  |  |                     <div class="switch_r"> | 
 |  |  |                         <p>系统状态</p> | 
 |  |  |                         <p id="system-run-desc">系统运行中</p> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 堆垛机状态 --> | 
 |  |  |             <div class="machine-status"> | 
 |  |  |                 <div class="body-head">堆垛机状态</div> | 
 |  |  |                 <div class="state"> | 
 |  |  |                     <span>堆垛机 1</span> | 
 |  |  |                     <span class="state-ss machine-put-flag   ">入库</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="state"> | 
 |  |  |                     <span>堆垛机 2</span> | 
 |  |  |                     <span class="state-ss machine-auto-flag   ">自动</span> | 
 |  |  |  | 
 |  |  |         <!-- 颜色提示 --> | 
 |  |  |         <div class="tips"> | 
 |  |  |             <div class="tips-item"> | 
 |  |  |                 <label>堆垛机状态颜色: </label> | 
 |  |  |                 <div class="item-group"> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="button"><span>所有状态</span></div> | 
 |  |  |                 <div class="button item-group"> | 
 |  |  |                     <span class="machine-put-flag">入库</span> | 
 |  |  |                     <span class="machine-take-flag">出库</span> | 
 |  |  |                     <span class="machine-stock-move-flag">库到库</span> | 
 |  |  | 
 |  |  |                     <span class="machine-unauto-flag">非自动/手动</span> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="tips-item"> | 
 |  |  |                 <label>输送设备状态颜色: </label> | 
 |  |  |                 <div class="item-group"> | 
 |  |  |             <div class="line-status"> | 
 |  |  |                 <div class="body-head">输送线状态</div> | 
 |  |  |                 <div class="state states"> | 
 |  |  |                     <span>运输线总数</span> | 
 |  |  |                     <span id="line-total" class="line-ss"></span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="button"><span>所有状态</span></div> | 
 |  |  |                 <div class="button item-group"> | 
 |  |  |                     <span class="site-auto-run-id">自动+有物+ID</span> | 
 |  |  |                     <span class="site-auto-run">自动+有物</span> | 
 |  |  |                     <span class="site-auto-id">自动+ID</span> | 
 |  |  | 
 |  |  |                     <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> | 
 |  |  |                 </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> | 
 |  |  |         </div> | 
 |  |  |         <!-- 堆垛机弹窗 --> | 
 |  |  |         <div id="crnWindow" style="display: none;" class="animate__animated animate__fadeIn"> | 
 |  |  |             <div id="crnWindow-head"> | 
 |  |  |                 <div class='detailed'></div> | 
 |  |  |                 <button></button> | 
 |  |  |             </div> | 
 |  |  |             <form> | 
 |  |  |                 <!-- 堆垛机号 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label" style> | 
 |  |  |                         <span>堆垛机号:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="crnNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 工作号 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>工作号:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="workNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 站源 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>站源:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="sourceStaNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 目标站 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>目标站:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="staNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 工作状态 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>工作状态:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="wrkSts" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 出入类型 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>出入类型:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="ioType" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 源库位 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>源库位:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="sourceLocNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 目标库位 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>目标库位:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="locNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 堆垛机状态 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>堆垛机状态:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="crnStatus" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 异常 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>异常:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="error" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |             </form> | 
 |  |  |         </div> | 
 |  |  |         <!-- 输送设备弹窗 --> | 
 |  |  |         <div id="siteWindow" style="display: none;" class="animate__animated animate__fadeIn"> | 
 |  |  |             <!-- 表头 --> | 
 |  |  |             <div id="siteWindow-head"> | 
 |  |  |                 <div class='detailed'></div> | 
 |  |  |                 <button></button> | 
 |  |  |             </div> | 
 |  |  |             <form> | 
 |  |  |                 <!-- 设备号 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>设备号:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="siteId" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 工作号 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>工作号:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="workNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 工作状态 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>工作状态:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="wrkSts" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 自动 --> | 
 |  |  |                 <div class="form-item-checkbox"> | 
 |  |  |                     <div class="form-item-label-checkbox"> | 
 |  |  |                         <span>自动</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input-checkbox"> | 
 |  |  |                         <input type="checkbox" name="autoing"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 有物 --> | 
 |  |  |                 <div class="form-item-checkbox"> | 
 |  |  |                     <div class="form-item-label-checkbox"> | 
 |  |  |                         <span>有物</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input-checkbox"> | 
 |  |  |                         <input type="checkbox" name="loading"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 能入 --> | 
 |  |  |                 <div class="form-item-checkbox"> | 
 |  |  |                     <div class="form-item-label-checkbox"> | 
 |  |  |                         <span>能入</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input-checkbox"> | 
 |  |  |                         <input type="checkbox" name="canining"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 能出 --> | 
 |  |  |                 <div class="form-item-checkbox"> | 
 |  |  |                     <div class="form-item-label-checkbox"> | 
 |  |  |                         <span>能出</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input-checkbox"> | 
 |  |  |                         <input type="checkbox" name="canouting"> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 出入类型 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>出入类型:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="ioType" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 源站 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>源站:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="sourceStaNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 目标站 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>目标站:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="staNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 源库位 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>源库位:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="sourceLocNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 目标库位 --> | 
 |  |  |                 <div class="form-item"> | 
 |  |  |                     <div class="form-item-label"> | 
 |  |  |                         <span>目标库位:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="form-item-input"> | 
 |  |  |                         <input type="text" name="locNo" value=""> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |  | 
 |  |  |             </form> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | </header> | 
 |  |  | <main> | 
 |  |  |  | 
 |  |  |     <!----------- 工具栏 ----------> | 
 |  |  |     <!-- 入库口 --> | 
 |  |  |     <div class="cargo-put"></div> | 
 |  |  |     <!-- 扫码器 --> | 
 |  |  |     <div id="code-decoder-1" class="code-decoder"> | 
 |  |  |         <span id="code-decoder-data-1" class="code-decoder-data">0</span> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  |     <!-- 扫码器 --> | 
 |  |  |     <div id="code-decoder-2" class="code-decoder"> | 
 |  |  |         <span id="code-decoder-data-2" class="code-decoder-data">0</span> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     <!----------- 左输送线 ----------> | 
 |  |  |  | 
 |  |  |     <!-- 第一列(宽度 100px) --> | 
 |  |  |     <div class="site-row site-row-1"> | 
 |  |  |         <div id="site-1" class="site" style="height: 20px;line-height: 20px;">1</div> | 
 |  |  |         <div id="site-3" class="site" style="height: 20px;line-height: 20px; margin-top: 20px">3</div> | 
 |  |  |         <div id="site-5" class="site" style="height: 20px;line-height: 20px; margin-top: 0px">5</div> | 
 |  |  |         <div id="site-7" class="site" style="height: 20px;line-height: 20px; margin-top: 20px">7</div> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  |     <!-- 货架 + 堆垛机 + 入库站点 + 出库站点 --> | 
 |  |  |     <div class="main-part"> | 
 |  |  |         <!--第一排--> | 
 |  |  |         <div class="lane"> | 
 |  |  |             <span class="row-no">1#</span> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <div id="site-2" class="site" style="">2</div> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <button class="item">3</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">5</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">7</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">9</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">11</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">13</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">15</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">17</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">19</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">21</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">23</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">25</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">27</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">29</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">31</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">33</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">35</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">37</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">39</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">41</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">43</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">45</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">47</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">49</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">51</button> | 
 |  |  |                 <div class="site site-none">    </div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 堆垛机 --> | 
 |  |  |             <div class="crn"> | 
 |  |  |                 <hr class="pathway"> | 
 |  |  |                 <div id="crn-1" class="machine"></div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <div id="site-4" class="site" style="">4</div> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <button class="item">3</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">5</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">7</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">9</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">11</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">13</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">15</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">17</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">19</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">21</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">23</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">25</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">27</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">29</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">31</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">33</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">35</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">37</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">39</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">41</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">43</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">45</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">47</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">49</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">51</button> | 
 |  |  |                 <div class="site site-none">    </div> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="lane"> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <div id="site-6" class="site" style="">6</div> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <button class="item">3</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">5</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">7</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">9</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">11</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">13</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">15</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">17</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">19</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">21</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">23</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">25</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">27</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">29</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">31</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">33</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">35</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">37</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">39</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">41</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">43</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">45</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">47</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">49</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">51</button> | 
 |  |  |                 <div class="site site-none">    </div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 堆垛机 --> | 
 |  |  |             <div class="crn"> | 
 |  |  |                 <hr class="pathway"> | 
 |  |  |                 <div id="crn-2" class="machine"></div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <div id="site-8" class="site" style="">8</div> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <button class="item">3</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">5</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">7</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">9</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">11</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">13</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">15</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">17</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">19</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">21</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">23</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">25</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">27</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">29</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">31</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">33</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">35</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">37</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">39</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">41</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">43</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">45</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">47</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">49</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">51</button> | 
 |  |  |                 <div class="site site-none">    </div> | 
 |  |  |             </div> | 
 |  |  |             <span class="row-no">4#</span> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | </main> | 
 |  |  |  | 
 |  |  | <!-- 弹窗 --> | 
 |  |  | <!-- 输送设备弹窗 --> | 
 |  |  | <div id="siteWindow" style="display: none"> | 
 |  |  |     <form> | 
 |  |  |         <!-- 第一行 --> | 
 |  |  |         <div class="form-item" style="width: 25%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>设备号</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="siteId" value="" disabled="disabled" style="width: 4rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 25%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>工作号</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="workNo" value="" disabled="disabled" style="width: 4rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 45%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>工作状态</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="wrkSts" value="" disabled="disabled" style="width: 10rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!-- 第二行 --> | 
 |  |  |         <div class="form-item" style="width: 20%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>自动</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="checkbox" name="autoing" disabled="disabled" style="width: 1rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 20%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>有物</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="checkbox" name="loading" disabled="disabled" style="width: 1rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |          <div class="form-item" style="width: 20%"> | 
 |  |  |              <div class="form-item-label"> | 
 |  |  |                  <span>能入</span> | 
 |  |  |              </div> | 
 |  |  |              <div class="form-item-input"> | 
 |  |  |                  <input type="checkbox" name="canining" disabled="disabled" style="width: 1rem"> | 
 |  |  |              </div> | 
 |  |  |          </div> | 
 |  |  |          <div class="form-item" style="width: 20%"> | 
 |  |  |              <div class="form-item-label"> | 
 |  |  |                  <span>能出</span> | 
 |  |  |              </div> | 
 |  |  |              <div class="form-item-input"> | 
 |  |  |                  <input type="checkbox" name="canouting" disabled="disabled" style="width: 1rem"> | 
 |  |  |              </div> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!-- 第三行 --> | 
 |  |  |         <div class="form-item" style="width: 40%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>出入类型</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="ioType" value="" disabled="disabled" style="width: 8rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 25%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>源站</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="sourceStaNo" value="" disabled="disabled" style="width: 4rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 25%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>目标站</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="staNo" value="" disabled="disabled" style="width: 4rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!-- 第四行 --> | 
 |  |  |         <div class="form-item" style="width: 40%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>源库位</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="sourceLocNo" value="" disabled="disabled" style="width: 8rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 40%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>目标库位</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="locNo" value="" disabled="disabled" style="width: 8rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     </form> | 
 |  |  | </div> | 
 |  |  |  | 
 |  |  | <!-- 堆垛机弹窗 --> | 
 |  |  | <div id="crnWindow" style="display: none"> | 
 |  |  |     <form> | 
 |  |  |         <!-- 第一行 --> | 
 |  |  |         <div class="form-item" style="width: 23%"> | 
 |  |  |             <div class="form-item-label"  style="width: 87px"> | 
 |  |  |                 <span>堆垛机号</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="crnNo" value="" disabled="disabled" style="width: 3rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 25%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>工作号</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="workNo" value="" disabled="disabled" style="width: 5rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 23%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>源站</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="sourceStaNo" value="" disabled="disabled" style="width: 4rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 25%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>目标站</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="staNo" value="" disabled="disabled" style="width: 4rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!-- 第二行 --> | 
 |  |  |         <div class="form-item" style="width: 45%"> | 
 |  |  |             <div class="form-item-label" style="width: 87px"> | 
 |  |  |                 <span>工作状态</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="wrkSts" value="" disabled="disabled" style="width: 10rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 45%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>出入类型</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="ioType" value="" disabled="disabled" style="width: 10rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!-- 第三行 --> | 
 |  |  |         <div class="form-item" style="width: 45%"> | 
 |  |  |             <div class="form-item-label" style="width: 87px"> | 
 |  |  |                 <span>源库位</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="sourceLocNo" value="" disabled="disabled" style="width: 10rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 45%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>目标库位</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="locNo" value="" disabled="disabled" style="width: 10rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!-- 第四行 --> | 
 |  |  |         <div class="form-item" style="width: 95%"> | 
 |  |  |             <div class="form-item-label"> | 
 |  |  |                 <span>堆垛机状态</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="crnStatus" disabled="disabled" style="width: 25rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="form-item" style="width: 95%"> | 
 |  |  |             <div class="form-item-label" style="width: 87px"> | 
 |  |  |                 <span>异常</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="form-item-input"> | 
 |  |  |                 <input type="text" name="error" disabled="disabled" style="width: 25rem"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     </form> | 
 |  |  | </div> | 
 |  |  |  | 
 |  |  | </body> | 
 |  |  |  | 
 |  |  | </html> | 
 |  |  | <script> | 
 |  |  |     getMap(); | 
 |  |  | </script> | 
 |  |  | <script> | 
 |  |  |     setInterval(function () { | 
 |  |  |         getCodeData(); | 
 |  |  |         renderBarCode(); | 
 |  |  |     }, 1000) | 
 |  |  |     var tData = [],tData1 = [],tData2 = [],tData3 = []; | 
 |  |  |     function getCodeData() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + '/console/barcode/output/site', | 
 |  |  |             method: 'GET', | 
 |  |  |             success: function (res) { | 
 |  |  |                 console.log(res) | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     tData = eval(res.data); | 
 |  |  |                     if (tData.length <= 5) { | 
 |  |  |                         tData1 = tData | 
 |  |  |                     } else if (tData.length <= 10) { | 
 |  |  |                         tData1 = tData.slice(0, 5) | 
 |  |  |                         tData.splice(0, 5) | 
 |  |  |                         tData2 = tData | 
 |  |  |                     } else if (tData.length <= 15) { | 
 |  |  |                         tData1 = tData.slice(0, 5) | 
 |  |  |                         tData2 = tData.slice(6, 10) | 
 |  |  |                         tData.splice(0, 10) | 
 |  |  |                         tData3 = tData | 
 |  |  |                     } else { | 
 |  |  |                         tData = tData.slice(-15) | 
 |  |  |                         tData1 = tData.slice(-15) | 
 |  |  |                         tData2 = tData.slice(-10) | 
 |  |  |                         tData3 = tData.slice(-5) | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |     function renderBarCode() { | 
 |  |  |         for (var i = 0; i < tData1.length; i++) { | 
 |  |  |             var str1 = '<li><span>' + tData1[i].barcode + '</span><span class="right">' + tData1[i].time + '</span></li>' | 
 |  |  |             $('#barcode1').append(str1) | 
 |  |  |         } | 
 |  |  |         for (var j = 0; j < tData2.length; j++) { | 
 |  |  |             var str2 = '<li><span>' + tData2[j].barcode + '</span><span class="right">' + tData2[j].time + '</span></li>' | 
 |  |  |             $('#barcode2').append(str2) | 
 |  |  |         } | 
 |  |  |         for (var k = 0; k < tData3.length; k++) { | 
 |  |  |             var str3 = '<li><span>' + tData3[k].barcode + '</span><span class="right">' + tData3[k].time + '</span></li>' | 
 |  |  |             $('#barcode3').append(str3) | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  | <script type="text/javascript"> | 
 |  |  |     // 弹窗站点信息 | 
 |  |  |     $('.site').on('click', function () { | 
 |  |  |         var id = this.id.split("-")[1]; | 
 |  |  |         $("#siteWindow").attr("style", "display:block;");//显示div | 
 |  |  |         $("#crnWindow").attr("style", "display:none;"); | 
 |  |  |         $(".detailed").empty(); | 
 |  |  |         $('.detailed').append(id + '站点详细信息'); | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/console/site/detail", | 
 |  |  |             headers: { | 
 |  |  |                 'token': localStorage.getItem('token') | 
 |  |  |             }, | 
 |  |  |             data: { | 
 |  |  |                 siteId: id | 
 |  |  |             }, | 
 |  |  |             method: 'post', | 
 |  |  |             success: function (res) { | 
 |  |  |                 for (var val in res.data) { | 
 |  |  |                     var find = $("#siteWindow").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'); | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |     }); | 
 |  |  |     // 堆垛机信息 | 
 |  |  |     $('.machine').on('click', function () { | 
 |  |  |         var id = this.id.split("-")[1]; | 
 |  |  |         $("#crnWindow").attr('style', 'display:block;'); | 
 |  |  |         $("#siteWindow").attr("style", "display:none;"); | 
 |  |  |         $('.detailed').empty(); | 
 |  |  |         $('.detailed').append(id + '号堆垛机'); | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/console/crn/detail", | 
 |  |  |             headers: { | 
 |  |  |                 'token': localStorage.getItem('token') | 
 |  |  |             }, | 
 |  |  |             data: { | 
 |  |  |                 crnNo: id | 
 |  |  |             }, | 
 |  |  |             method: 'post', | 
 |  |  |             success: function (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'); | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |     }) | 
 |  |  |     // 弹窗关闭 | 
 |  |  |     $('button').on('click', function () { | 
 |  |  |         $('#siteWindow').attr('style', 'display:none') | 
 |  |  |         $('#crnWindow').attr('style', 'display:none') | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     var crn1Position = 0; | 
 |  |  |     var crn2Position = 0; | 
 |  |  |     var crn3Position = 0; | 
 |  |  |     var crn4Position = 0; | 
 |  |  |     var crn5Position = 0; | 
 |  |  |  | 
 |  |  |     // 初始化 | 
 |  |  |     getSitesInfo(); | 
 |  |  |     getCrnInfo(); | 
 |  |  |     getSystemRunningStatus(); | 
 |  |  |     getBarcodeInfo(); | 
 |  |  |     getScaleInfo(); | 
 |  |  |     // 实时访问 | 
 |  |  |     setInterval(function () { | 
 |  |  |         getCrnInfo(); | 
 |  |  |         getSystemRunningStatus(); | 
 |  |  |         getBarcodeInfo() | 
 |  |  |         getBarcodeInfo(); | 
 |  |  |         getScaleInfo(); | 
 |  |  |     }, 1000); | 
 |  |  |     setInterval(function () { | 
 |  |  |         getSitesInfo(); | 
 |  |  | 
 |  |  |  | 
 |  |  |     // 系统运行开关 | 
 |  |  |     function systemSwitch() { | 
 |  |  |         if (parent.systemRunning){ | 
 |  |  |             layer.prompt({title: '请输入口令,并停止 WCS 系统', formType: 1,   shadeClose: true}, function(pass, idx){ | 
 |  |  |         if (parent.systemRunning) { | 
 |  |  |             layer.prompt({title: '请输入口令,并停止 WCS 系统', formType: 1, shadeClose: true}, function (pass, idx) { | 
 |  |  |                 layer.close(idx); | 
 |  |  |                 doSwitch(0, pass); // 停止wcs系统 | 
 |  |  |             }); | 
 |  |  | 
 |  |  |     function doSwitch(operatorType, password) { | 
 |  |  |         // 加载tips | 
 |  |  |         var index = layer.load(1, { | 
 |  |  |             shade: [0.1,'#fff'] | 
 |  |  |             shade: [0.1, '#fff'] | 
 |  |  |         }); | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/console/system/switch", | 
 |  |  |             url: baseUrl + "/console/system/switch", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             // async: false, | 
 |  |  |             data: { | 
 |  |  | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 layer.close(index); | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     if (res.data.status) { | 
 |  |  |                         $('#system-icon').attr("class", "system-icon-open"); | 
 |  |  |                         $('#system-run-desc').html("系统运行中..."); | 
 |  |  | 
 |  |  |                         $('#system-run-desc').html("系统已停止!"); | 
 |  |  |                         parent.systemRunning = false; | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     alert(res.msg); | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  |                 } else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |  | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  | 
 |  |  |     // 获取wcs系统运行状态 | 
 |  |  |     function getSystemRunningStatus() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/console/system/running/status", | 
 |  |  |             url: baseUrl + "/console/system/running/status", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     if (res.data.status) { | 
 |  |  |                         $('#system-icon').attr("class", "system-icon-open"); | 
 |  |  |                         $('#system-run-desc').html("系统运行中..."); | 
 |  |  | 
 |  |  |                         $('#system-run-desc').html("系统已停止!"); | 
 |  |  |                         parent.systemRunning = false; | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     alert(res.msg); | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  |                 } else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 输送设备实时数据获取 | 
 |  |  |     function getSitesInfo(){ | 
 |  |  |     function getSitesInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/console/latest/data/site", | 
 |  |  |             url: baseUrl + "/console/latest/data/site", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     var sites = res.data; | 
 |  |  |                     for (var i = 0; i < sites.length; i++){ | 
 |  |  |                         var siteEl = $("#site-"+sites[i].siteId); | 
 |  |  |                     for (var i = 0; i < sites.length; i++) { | 
 |  |  |                         var siteEl = $("#site-" + sites[i].siteId); | 
 |  |  |                         siteEl.attr("class", "site " + sites[i].siteStatus); | 
 |  |  |                         if (sites[i].workNo != null && sites[i].workNo>0) { | 
 |  |  |                         if (sites[i].workNo != null && sites[i].workNo > 0) { | 
 |  |  |                             siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]"); | 
 |  |  |                         } else { | 
 |  |  |                             siteEl.html(sites[i].siteId); | 
 |  |  |                         } | 
 |  |  |  | 
 |  |  |                         if (sites[i].siteId === '1' || sites[i].siteId === '2' || sites[i].siteId === '3') { | 
 |  |  |  | 
 |  |  |                             carAnimate(Number(sites[i].siteId), Number(sites[i].nearbySta)); | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     alert(res.msg); | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  |                 } else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 堆垛机实时数据获取 | 
 |  |  |     function getCrnInfo(){ | 
 |  |  |     function getCrnInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/console/latest/data/crn", | 
 |  |  |             url: baseUrl + "/console/latest/data/crn", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                 // console.log(res) | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     var crns = res.data; | 
 |  |  |                     for (var i = 0; i < crns.length; i++){ | 
 |  |  |                         var crnEl = $("#crn-"+crns[i].crnId); | 
 |  |  |                     for (var i = 0; i < crns.length; i++) { | 
 |  |  |                         var crnEl = $("#crn-" + crns[i].crnId); | 
 |  |  |                         crnEl.attr("class", "machine " + crns[i].crnStatus); | 
 |  |  |                         // crnAnimate(crns[i].crnId, crns[i].offset); | 
 |  |  |                         var unit = $('.item').eq(0).width()+4; | 
 |  |  |                         crnEl.animate({left: (crns[i].bay * unit + 20) +'px'}, 1000); | 
 |  |  |                         if (crns[i].bay < 0) { | 
 |  |  |                             crns[i].bay = 1; | 
 |  |  |                         } | 
 |  |  |                         let unit = 20 | 
 |  |  |                         if (crns[i].crnId === 4) { | 
 |  |  |                             let offSet = 960; | 
 |  |  |                             if(crns[i].bay === 1){ | 
 |  |  |                                 crnEl.animate({left: offSet + 'px'}, 1000); | 
 |  |  |                             } else { | 
 |  |  |                                 crnEl.animate({left: (offSet + unit*(crns[i].bay-1)) + 'px'}, 1000); | 
 |  |  |                             } | 
 |  |  |                         } else { | 
 |  |  |                             let offSet = 450; | 
 |  |  |                             if(crns[i].bay === 1){ | 
 |  |  |                                 crnEl.animate({left: offSet + 'px'}, 1000); | 
 |  |  |                             } else { | 
 |  |  |                                 crnEl.animate({left: (offSet + unit*(crns[i].bay -1)) + 'px'}, 1000); | 
 |  |  |                             } | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     alert(res.msg); | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  |                 } else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 扫码器实时数据获取 | 
 |  |  |     function getBarcodeInfo(){ | 
 |  |  |     function getBarcodeInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/console/latest/data/barcode", | 
 |  |  |             url: baseUrl + "/console/latest/data/barcode", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                 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); | 
 |  |  |                     for (var i = 0; i < barcodes.length; i++) { | 
 |  |  |                         $("#code-decoder-data-" + barcodes[i].barcodeId).html(barcodes[i].codeValue); | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     alert(res.msg); | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  |                 } else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 磅秤实时数据获取 | 
 |  |  |     function getScaleInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/console/latest/data/scale", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |  | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     var sclaes = res.data; | 
 |  |  |                     for (var i = 0; i < sclaes.length; i++) { | 
 |  |  |                         console.log(sclaes[i].scaleId + ":" + sclaes[i].value) | 
 |  |  |                         $("#scale-data-" + sclaes[i].scaleId).text(sclaes[i].value); | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  |                 } else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  | 
 |  |  |  | 
 |  |  |     // 堆垛机偏移动画 | 
 |  |  |     function crnAnimate(id, leftVal) { | 
 |  |  |         // console.log(crn1Position) | 
 |  |  |         switch (id) { | 
 |  |  |             case 1: | 
 |  |  |                 $("#crn-1").animate({left: leftVal+'px'}, 1000); | 
 |  |  |                 $("#crn-1").animate({left: leftVal + 'px'}, 1000); | 
 |  |  |                 crn1Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 2: | 
 |  |  |                 $("#crn-2").animate({left: leftVal+'px'}, 1000); | 
 |  |  |                 $("#crn-2").animate({left: leftVal + 'px'}, 1000); | 
 |  |  |                 crn2Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 3: | 
 |  |  |                 $("#crn-3").animate({left: leftVal + 'px'}, 1000); | 
 |  |  |                 crn3Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 4: | 
 |  |  |                 $("#crn-4").animate({left: leftVal + 'px'}, 1000); | 
 |  |  |                 crn4Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 5: | 
 |  |  |                 $("#crn-5").animate({left: leftVal + 'px'}, 1000); | 
 |  |  |                 crn5Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             default: | 
 |  |  |                 break | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 页面点击事件监听 --------------------------------------------------------- | 
 |  |  |  | 
 |  |  |     // 输送设备点击事件 | 
 |  |  |     $('.site').on('click', function () { | 
 |  |  |         var id = this.id.split("-")[1]; | 
 |  |  |         if (id === undefined) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         layer.open({ | 
 |  |  |             title: id + " 站点信息详情", | 
 |  |  |             closeBtn: 0, | 
 |  |  |             skin: 'layui-layer-lan', | 
 |  |  |             offset: '180px', | 
 |  |  |             type: 1, | 
 |  |  |             shadeClose: true, | 
 |  |  |             content: $('#siteWindow'), | 
 |  |  |             area: ['35rem', '18rem'], | 
 |  |  |             btn: ['确定', '关闭'], | 
 |  |  |             success: function(layero, index){ | 
 |  |  |                 http.post(baseUrl+"/console/site/detail", {siteId: id}, function (res) { | 
 |  |  |                     for (var val in res.data) { | 
 |  |  |                         var find = $("#siteWindow").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'); | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |             }, | 
 |  |  |             end: function () { | 
 |  |  |                 $(':input', $("#siteWindow")).val('').removeAttr('checked').removeAttr('selected'); | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     // 堆垛机点击事件 | 
 |  |  |     $('.machine').on('click', function () { | 
 |  |  |         var id = this.id.split("-")[1]; | 
 |  |  |         layer.open({ | 
 |  |  |             title: id+"号堆垛机", | 
 |  |  |             skin: 'layui-layer-lan', | 
 |  |  |             closeBtn: 0, | 
 |  |  |             type: 1, | 
 |  |  |             offset: '150px', | 
 |  |  |             shadeClose: true, | 
 |  |  |             content: $("#crnWindow"), | 
 |  |  |             area: ['40rem', '20rem'], | 
 |  |  |             btn: ['确定', '关闭'], | 
 |  |  |             success: function(layero, index){ | 
 |  |  |                 http.post(baseUrl+"/console/crn/detail", {crnNo: id}, function (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'); | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |             }, | 
 |  |  |             end: function () { | 
 |  |  |                 $(':input', $("#crnWindow")).val('').removeAttr('checked').removeAttr('selected'); | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     // 小车偏移动画 | 
 |  |  |     function carAnimate(id, target) { | 
 |  |  |         var targetTop = 122; | 
 |  |  |         if (id === 8) { | 
 |  |  |         // debugger | 
 |  |  |         var targetTop = 0; | 
 |  |  |         if (id === 1 || id === '1' || id === '2' || id === 2 || id === '3' || id === 3) { | 
 |  |  |             switch (target) { | 
 |  |  |                 case 1: | 
 |  |  |                     targetTop += 160; | 
 |  |  |                     targetTop += 792; | 
 |  |  |                     break; | 
 |  |  |                 case 2: | 
 |  |  |                     targetTop += 120; | 
 |  |  |                     targetTop += 771; | 
 |  |  |                     break; | 
 |  |  |                 case 3: | 
 |  |  |                     targetTop += 80; | 
 |  |  |                     targetTop += 727; | 
 |  |  |                     break; | 
 |  |  |                 case 4: | 
 |  |  |                     targetTop += 40; | 
 |  |  |                     targetTop += 706; | 
 |  |  |                     break; | 
 |  |  |                 case 5: | 
 |  |  |                     targetTop += 662; | 
 |  |  |                     break; | 
 |  |  |                 case 6: | 
 |  |  |                     targetTop += 620; | 
 |  |  |                     break; | 
 |  |  |                 case 7: | 
 |  |  |                     targetTop += 0; | 
 |  |  |                     targetTop += 578; | 
 |  |  |                     break; | 
 |  |  |                 case 8: | 
 |  |  |                     targetTop += 530; | 
 |  |  |                     break; | 
 |  |  |                 case 9: | 
 |  |  |                     targetTop += 190; | 
 |  |  |                     break; | 
 |  |  |                 case 10: | 
 |  |  |                     targetTop += 147; | 
 |  |  |                     break; | 
 |  |  |                 case 11: | 
 |  |  |                     targetTop += 107; | 
 |  |  |                     break; | 
 |  |  |                 case 12: | 
 |  |  |                     targetTop += 63; | 
 |  |  |                     break; | 
 |  |  |                 default: | 
 |  |  |                     return; | 
 |  |  | 
 |  |  |         } else { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         $("#site-" + id).animate({top: targetTop+'px'}, 1000); | 
 |  |  |  | 
 |  |  |         $("#site-" + id).animate({top: targetTop + 'px'}, 1000); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     // 台车点击事件 | 
 |  |  |     $(document).on("click", ".item", function () { | 
 |  |  |         var value = prompt('目标站:', "1"); | 
 |  |  |         if (value == null) { | 
 |  |  |             alert('不能为空!'); | 
 |  |  |         } else if (value === '') { | 
 |  |  |             alert('不能为空!'); | 
 |  |  |         } else { | 
 |  |  |             carAnimate(8, Number(value)); | 
 |  |  |         } | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  | </script> | 
 |  |  | </html> | 
 |  |  | </script> |