|  |  | 
 |  |  | <!DOCTYPE html> | 
 |  |  | <html> | 
 |  |  | <html lang="en"> | 
 |  |  | <head> | 
 |  |  |     <meta charset="utf-8"> | 
 |  |  |     <title>WCS控制中心</title> | 
 |  |  |     <!--<link rel="stylesheet" type="text/css" href="../static/css/common.css">--> | 
 |  |  |     <link rel="stylesheet" href="../static/css/console.css"> | 
 |  |  |     <!--      <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">--> | 
 |  |  |     <link rel="stylesheet" href="../static/css/animate.min.css"> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     <meta charset="UTF-8"> | 
 |  |  |     <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> | 
 |  |  |     <script type="text/javascript" src="../static/js/common.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> | 
 |  |  | <div id="root"> | 
 |  |  |     <div class="head"> | 
 |  |  |         <div class="head-left"> | 
 |  |  |             <h1>自动仓库WCS监控图</h1> | 
 |  |  |             <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> | 
 |  |  |     <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="head-right"> | 
 |  |  |             <img src="../static/images/zy-logo.png" alt="中扬" height="44" width="80"> | 
 |  |  |         <!-- 货架 + 堆垛机 + 入库站点 --> | 
 |  |  |         <div class="main-part"> | 
 |  |  |  | 
 |  |  |         </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>--> | 
 |  |  | <!--                <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-site-move-flag">站到站</span>--> | 
 |  |  | <!--                    <span class="machine-p-move-flag">PToP</span>--> | 
 |  |  | <!--                    <span class="machine-error-flag">异常</span>--> | 
 |  |  | <!--                    <span class="machine-auto-flag">自动</span>--> | 
 |  |  | <!--                    <span class="machine-unauto-flag">非自动/手动</span>--> | 
 |  |  | <!--                </div>--> | 
 |  |  | <!--            </div>--> | 
 |  |  | <!--            <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-auto">自动</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> | 
 |  |  |  | 
 |  |  |     <!-- 货架 + 堆垛机 + 入库站点 --> | 
 |  |  |     <div class="main-part"> | 
 |  |  |         <!-- 第一组 --> | 
 |  |  |         <div class="lane"> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 82px">60</button> | 
 |  |  |                 <button class="item">58</button> | 
 |  |  |                 <button class="item">56</button> | 
 |  |  |                 <button class="item">54</button> | 
 |  |  |                 <button class="item">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |             </div> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |  | 
 |  |  |                 <button class="item" style="margin-left: 82px">60</button> | 
 |  |  |                 <button class="item">58</button> | 
 |  |  |                 <button class="item">56</button> | 
 |  |  |                 <button class="item">54</button> | 
 |  |  |                 <button class="item">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <div id="site-101" class="site" style="">101</div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 堆垛机 --> | 
 |  |  |             <div class="crn"> | 
 |  |  |                 <hr class="pathway"> | 
 |  |  |                 <div id="crn-1" class="machine"></div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |  | 
 |  |  |                 <button class="item" style="margin-left: 82px">60</button> | 
 |  |  |                 <button class="item">58</button> | 
 |  |  |                 <button class="item">56</button> | 
 |  |  |                 <button class="item">54</button> | 
 |  |  |                 <button class="item">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <div id="site-106" class="site" style="">106</div> | 
 |  |  |             </div> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 82px">60</button> | 
 |  |  |                 <button class="item">58</button> | 
 |  |  |                 <button class="item">56</button> | 
 |  |  |                 <button class="item">54</button> | 
 |  |  |                 <button class="item">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!-- 第二组 --> | 
 |  |  |         <div class="lane"> | 
 |  |  |             <span class="row-no"></span> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |             </div> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |  | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <div id="site-113" class="site" style="">113</div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 堆垛机 --> | 
 |  |  |             <div class="crn" style="margin-left: 108px"> | 
 |  |  |                 <hr class="pathway"> | 
 |  |  |                 <div id="crn-2" class="machine"></div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <div id="site-120" class="site" style="">120</div> | 
 |  |  |  | 
 |  |  |             </div> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |  | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!--第三组--> | 
 |  |  |         <div class="lane"> | 
 |  |  |             <span class="row-no"></span> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |             </div> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <div id="site-127" class="site" style="">127</div> | 
 |  |  |  | 
 |  |  |             </div> | 
 |  |  |             <!-- 堆垛机 --> | 
 |  |  |             <div class="crn" style="margin-left: 108px"> | 
 |  |  |                 <hr class="pathway"> | 
 |  |  |                 <div id="crn-3" class="machine"></div> | 
 |  |  |             </div> | 
 |  |  |             <!-- 货架 --> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |                 <div id="site-133" class="site" style="">133</div> | 
 |  |  |  | 
 |  |  |             </div> | 
 |  |  |             <div class="stock-group"> | 
 |  |  |                 <button class="item" style="margin-left: 193px">52</button> | 
 |  |  |                 <button class="item">50</button> | 
 |  |  |                 <button class="item">48</button> | 
 |  |  |                 <button class="item">46</button> | 
 |  |  |                 <button class="item">44</button> | 
 |  |  |                 <button class="item">42</button> | 
 |  |  |                 <button class="item">40</button> | 
 |  |  |                 <button class="item">38</button> | 
 |  |  |                 <button class="item">36</button> | 
 |  |  |                 <button class="item">34</button> | 
 |  |  |                 <button class="item">32</button> | 
 |  |  |                 <button class="item">30</button> | 
 |  |  |                 <button class="item">28</button> | 
 |  |  |                 <button class="item">26</button> | 
 |  |  |                 <button class="item">24</button> | 
 |  |  |                 <button class="item">22</button> | 
 |  |  |                 <button class="item">20</button> | 
 |  |  |                 <button class="item">18</button> | 
 |  |  |                 <button class="item">16</button> | 
 |  |  |                 <button class="item">14</button> | 
 |  |  |                 <button class="item">12</button> | 
 |  |  |                 <button class="item">10</button> | 
 |  |  |                 <button class="item">8</button> | 
 |  |  |                 <button class="item">6</button> | 
 |  |  |                 <button class="item">4</button> | 
 |  |  |                 <button class="item">2</button> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <!--第1列(宽度 70px) --> | 
 |  |  |     <div class="site-row site-row-1"> | 
 |  |  |         <div class="site-k" style="height:39px;width:70px;"></div> | 
 |  |  |         <div id="site-102" class="site" style="height: 18px;line-height: 18px;">102</div> | 
 |  |  |         <div id="site-107" class="site" style="height: 18px;line-height: 18px;margin-top: 20px">107</div> | 
 |  |  |         <div id="site-114" class="site" style="height: 18px;line-height: 18px;margin-top: 68px">114</div> | 
 |  |  |         <div id="site-121" class="site" style="height: 18px;line-height: 18px;margin-top: 20px">121</div> | 
 |  |  |         <div id="site-128" class="site" style="height: 18px;line-height: 18px;margin-top: 68px">128</div> | 
 |  |  |         <div id="site-134" class="site" style="height: 18px;line-height: 18px;margin-top: 20px">134</div> | 
 |  |  |     </div> | 
 |  |  |     <div class="site-row site-row-2"> | 
 |  |  |         <div class="site-k" style="height:39px;width:70px;"></div> | 
 |  |  |         <div id="site-103" class="site" style="height: 18px;line-height: 18px;">103</div> | 
 |  |  |         <div id="site-105" class="site" style="height: 18px;line-height: 18px">105</div> | 
 |  |  |         <div id="site-108" class="site" style="height: 18px;line-height: 18px">108</div> | 
 |  |  |         <div id="site-111" class="site" style="height: 66px;line-height: 66px">111</div> | 
 |  |  |         <div id="site-115" class="site" style="height: 18px;line-height: 18px">115</div> | 
 |  |  |         <div id="site-118" class="site" style="height: 18px;line-height: 18px">118</div> | 
 |  |  |         <div id="site-122" class="site" style="height: 18px;line-height: 18px">122</div> | 
 |  |  |         <div id="site-125" class="site" style="height: 66px;line-height: 66px">125</div> | 
 |  |  |         <div id="site-129" class="site" style="height: 18px;line-height: 18px">129</div> | 
 |  |  |         <div id="site-132" class="site" style="height: 18px;line-height: 18px">132</div> | 
 |  |  |         <div id="site-135" class="site" style="height: 18px;line-height: 18px">135</div> | 
 |  |  |     </div> | 
 |  |  |     <div class="site-row site-row-3"> | 
 |  |  |         <div class="site-k" style="height:39px;width:70px;"></div> | 
 |  |  |         <div id="site-104" class="site" style="height: 18px;line-height: 18px;width:162px;">104</div> | 
 |  |  |         <div id="site-109" class="site" style="height: 18px;line-height: 18px; margin-top: 20px">109</div> | 
 |  |  |         <div id="site-112" class="site" style="height: 66px;line-height: 68px">112</div> | 
 |  |  |         <div id="site-116" class="site" style="height: 18px;line-height: 18px;">116</div> | 
 |  |  |         <div id="site-119" class="site" style="height: 18px;line-height: 18px">119</div> | 
 |  |  |         <div id="site-123" class="site" style="height: 18px;line-height: 18px">123</div> | 
 |  |  |         <div id="site-126" class="site" style="height: 66px;line-height: 68px">126</div> | 
 |  |  |         <div id="site-130" class="site" style="height: 18px;line-height: 18px">130</div> | 
 |  |  |         <div id="site-136" class="site" style="height: 18px;line-height: 18px;width:162px; margin-top: 20px">136</div> | 
 |  |  |     </div> | 
 |  |  |     <div class="site-row site-row-4"> | 
 |  |  |         <div id="site-110" class="site" style="height: 18px;line-height: 18px;">110</div> | 
 |  |  |         <div id="site-117" class="site" style="height: 18px;line-height: 18px; margin-top: 68px">117</div> | 
 |  |  |         <div id="site-124" class="site" style="height: 18px;line-height: 18px; margin-top: 20px">124</div> | 
 |  |  |         <div id="site-131" class="site" style="height: 18px;line-height: 18px; margin-top: 68px">131</div> | 
 |  |  |     </div> | 
 |  |  | </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> | 
 |  |  |         <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-site-move-flag">站到站</span> | 
 |  |  |             <span class="machine-p-move-flag">PToP</span> | 
 |  |  |             <span class="machine-error-flag">异常</span> | 
 |  |  |             <span class="machine-auto-flag">自动</span> | 
 |  |  |             <span class="machine-unauto-flag">非自动/手动</span> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <div class="line-status"> | 
 |  |  |         <div class="body-head">输送线状态</div> | 
 |  |  |         <div class="state states"> | 
 |  |  |             <span>运输线总数</span> | 
 |  |  |             <span class="line-ss">58</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-auto">自动</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> | 
 |  |  |  | 
 |  |  |  | 
 |  |  | </body> | 
 |  |  |  | 
 |  |  | </html> | 
 |  |  | <script> | 
 |  |  |     var tData = [] | 
 |  |  |     var tData1 = [] | 
 |  |  |     var tData2 = [] | 
 |  |  |     var tData3 = [] | 
 |  |  |  | 
 |  |  |     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.slice(-15) | 
 |  |  |                         tData2 = tData.slice(-10) | 
 |  |  |                         tData3 = tData.slice(-5) | 
 |  |  |  | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     setInterval(function () { | 
 |  |  |         getCodeData(); | 
 |  |  |         renderBarCode(); | 
 |  |  |     }, 1000) | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     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>' | 
 |  |  | 
 |  |  | </script> | 
 |  |  | <script type="text/javascript"> | 
 |  |  |     // 弹窗站点信息 | 
 |  |  |     $('.site').on('click', function () { | 
 |  |  |     $(document).on('click', '.site' ,function () { | 
 |  |  |         var id = this.id.split("-")[1]; | 
 |  |  |         $("#siteWindow").attr("style", "display:block;");//显示div | 
 |  |  |         $("#crnWindow").attr("style", "display:none;"); | 
 |  |  |         $(".detailed").empty(); | 
 |  |  |         $('.detailed').append(id + '站点详细信息'); | 
 |  |  |         $("#siteWindow").css("display", "block");//显示div | 
 |  |  |         $("#crnWindow").css("display", "none"); | 
 |  |  |         $(".detailed").empty().append(id + '站点详细信息'); | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/console/site/detail", | 
 |  |  |             headers: { | 
 |  |  | 
 |  |  |                     if (find[0].type === 'text') { | 
 |  |  |                         find.val(res.data[val]); | 
 |  |  |                     } else if (find[0].type === 'checkbox') { | 
 |  |  |                         find.attr("checked", res.data[val] === 'Y'); | 
 |  |  |                         find.prop("checked", res.data[val] === 'Y'); | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  | 
 |  |  |  | 
 |  |  |     }); | 
 |  |  |     // 堆垛机信息 | 
 |  |  |     $('.machine').on('click', function () { | 
 |  |  |     $(document).on('click', '.machine',function () { | 
 |  |  |         var id = this.id.split("-")[1]; | 
 |  |  |         $("#crnWindow").attr('style', 'display:block;'); | 
 |  |  |         $("#siteWindow").attr("style", "display:none;"); | 
 |  |  |         $('.detailed').empty(); | 
 |  |  |         $('.detailed').append(id + '号堆垛机'); | 
 |  |  |         $("#crnWindow").css("display","block"); | 
 |  |  |         $("#siteWindow").css("display","none"); | 
 |  |  |         $(".detailed").empty().append(id + '号堆垛机'); | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/console/crn/detail", | 
 |  |  |             headers: { | 
 |  |  |                 'token': localStorage.getItem('token') | 
 |  |  |             }, | 
 |  |  |             data: { | 
 |  |  |                 crnNo: id | 
 |  |  |             }, | 
 |  |  |             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') { | 
 |  |  |                 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'); | 
 |  |  |                     }else if (find[0].type === 'checkbox'){ | 
 |  |  |                         find.prop("checked", res.data[val] === 'Y') | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |     }) | 
 |  |  | 
 |  |  |                         } else { | 
 |  |  |                             siteEl.html(sites[i].siteId); | 
 |  |  |                         } | 
 |  |  |                         if (i + 1 === 8) { | 
 |  |  |                             carAnimate(i + 1, Number(sites[i].nearbySta)); | 
 |  |  |  | 
 |  |  |                         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) { | 
 |  |  | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 // 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); | 
 |  |  |                         crnEl.attr("class", "machine " + crns[i].crnStatus); | 
 |  |  |                         var unit = ($('.item').eq(0).width() + 13) / 2; | 
 |  |  |                         if (crns[i].bay < 0) { | 
 |  |  |                             crns[i].bay = 0 | 
 |  |  |                         var unit = 0;//($('.item').eq(0).width() + 13) / 2; | 
 |  |  |  | 
 |  |  |                         if (crns[i].bay < 0 || crns[i].bay === -2) { | 
 |  |  |                             crns[i].bay = 1 | 
 |  |  |                         } | 
 |  |  |                         crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000); | 
 |  |  |                         // crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000); | 
 |  |  |                         // crns[i].bay = 15; | 
 |  |  |                         var offSet = 120; | 
 |  |  |                         unit = 15; | 
 |  |  |  | 
 |  |  |  | 
 |  |  |                         if(crns[i].bay === 1){ | 
 |  |  |                             crnEl.animate({left: offSet + 'px'}, 10); | 
 |  |  |                         } else { | 
 |  |  |                             crnEl.animate({left: (offSet - unit + (crns[i].bay * unit)) + 'px'}, 10); | 
 |  |  |                         } | 
 |  |  |  | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     parent.location.href = baseUrl + "/login"; | 
 |  |  | 
 |  |  |                 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 crnAnimate(id, leftVal) { | 
 |  |  |         // console.log(crn1Position) | 
 |  |  |         switch (id) { | 
 |  |  |             case 1: | 
 |  |  |                 $("#crn-1").animate({left: leftVal + 'px'}, 1000); | 
 |  |  | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 页面点击事件监听 --------------------------------------------------------- | 
 |  |  |  | 
 |  |  |     // 输送设备点击事件 | 
 |  |  |     // $('.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 += 140; | 
 |  |  |                     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); | 
 |  |  |     } | 
 |  |  |  |