| | |
| | | <!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> |
| | | <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> |
| | | |
| | | </style> |
| | | |
| | | </head> |
| | | <body> |
| | | <header> |
| | | <!-- 系统运行状态 --> |
| | | <div class="system-state"> |
| | | <div class="system-icon"></div> |
| | | <span>系统运行中...</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 class="tips"> |
| | | <div class="tips-item"> |
| | | <label>堆垛机状态颜色: </label> |
| | | <div class="item-group"> |
| | | <span class="machine-put">入库</span> |
| | | <span class="machine-take">出库</span> |
| | | <span class="machine-stock-move">库到库</span> |
| | | <span class="machine-site-move">站到站</span> |
| | | <span class="machine-p-move">PToP</span> |
| | | <span class="machine-error">异常</span> |
| | | <span class="machine-auto">自动</span> |
| | | <span class="machine-unauto">非自动/手动</span> |
| | | </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="tips-item"> |
| | | <label>输送设备状态颜色: </label> |
| | | <div class="item-group"> |
| | | <!-- 堆垛机状态 --> |
| | | <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-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> |
| | | |
| | | <!--分割线--> |
| | | <!--<hr class="header-hr">--> |
| | | </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> |
| | | |
| | | |
| | | <!-- 左输送线 --> |
| | | <!-- 第一列(宽度 100px)--> |
| | | <div class="site-row site-row-1"> |
| | | <div id="site-1" class="site" style="width: 80px; height: 50px;line-height: 50px">1[9999]</div> |
| | | <div id="site-2" class="site" >2</div> |
| | | <div id="site-3" class="site" style="width: 80px; height: 30px;line-height: 30px">3</div> |
| | | <div id="site-4" class="site" style="width: 80px; height: 60px;line-height: 60px">4</div> |
| | | <div id="site-5" class="site" style="width: 80px; height: 50px;line-height: 50px">5</div> |
| | | <div id="site-6" class="site" >6</div> |
| | | <div id="site-7" class="site" style="width: 80px; height: 68px;line-height: 68px">7</div> |
| | | <div id="site-8" class="site" style="width: 80px; height: 42px;line-height: 40px">8</div> |
| | | <div id="site-9" class="site" >9</div> |
| | | </div> |
| | | <!-- 第二列(宽度 100px) --> |
| | | <div class="site-row site-row-2"> |
| | | <div id="site-32" class="site" style="width: 80px; height: 50px;line-height: 50px">32</div> |
| | | <div id="site-31" class="site" >31</div> |
| | | <div id="site-30" class="site" style="width: 80px; height: 30px;line-height: 30px; background-color: red;">30</div> |
| | | <div id="site-23" class="site" >23</div> |
| | | <div id="site-22" class="site" style="width: 80px; height: 50px;line-height: 50px">22</div> |
| | | <div id="site-20" class="site" >20</div> |
| | | <div id="site-19" class="site" style="width: 80px;">19</div> |
| | | <div id="site-17" class="site" >17</div> |
| | | <div id="site-16" class="site" style="width: 80px; height: 35px;line-height: 35px">16</div> |
| | | <div id="site-15" class="site" style="width: 80px; height: 35px;line-height: 35px">15</div> |
| | | <div id="site-13" class="site" >13</div> |
| | | <div id="site-12" class="site" style="width: 80px;">12</div> |
| | | <div id="site-10" class="site" >10</div> |
| | | </div> |
| | | <!-- 第三列(宽度 100px)--> |
| | | <div class="site-row site-row-3"> |
| | | <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div> |
| | | <div id="site-29" class="site" style="width: 50px;">29</div> |
| | | <div id="site-28" class="site" style="width: 50px;">28</div> |
| | | <div class="site-none" style="width: 80px; height: 50px;line-height: 30px"></div> |
| | | <div id="site-24" class="site" >24</div> |
| | | </div> |
| | | <!-- 第四列(宽度 100px)--> |
| | | <div class="site-row site-row-4"> |
| | | <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div> |
| | | <div id="site-27" class="site" >27</div> |
| | | <div id="site-26" class="site" style="width: 80px; height: 30px;line-height: 30px">26</div> |
| | | <div id="site-25" class="site" >25</div> |
| | | </div> |
| | | |
| | | <!-- 货架 + 堆垛机 + 入库站点 + 出库站点 --> |
| | | <div class="main-part"> |
| | | <!--第二排--> |
| | | <div class="lane"> |
| | | <span class="row-no">2#</span> |
| | | <!-- 货架 --> |
| | | <div class="stock-group"> |
| | | <div class="site site-none"> </div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div id="site-21" class="site">21</div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <!-- 堆垛机 --> |
| | | <div class="crn"> |
| | | <hr class="pathway"> |
| | | <div id="crn1" class="machine"></div> |
| | | </div> |
| | | <!-- 货架 --> |
| | | <div class="stock-group"> |
| | | <div id="site-18" class="site">18</div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div class="site site-none"> </div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!--第一排--> |
| | | <div class="lane"> |
| | | <!-- 货架 --> |
| | | <div class="stock-group"> |
| | | <div class="site site-none"> </div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div id="site-14" class="site">14</div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <!-- 堆垛机 --> |
| | | <div class="crn"> |
| | | <hr class="pathway"> |
| | | <div id="crn2" class="machine"></div> |
| | | </div> |
| | | <!-- 货架 --> |
| | | <div class="stock-group"> |
| | | <div id="site-11" class="site">11</div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div class="site site-none"> </div> |
| | | <button class="item">1</button> |
| | | <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> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <span class="row-no">1#</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 右输送线 --> |
| | | |
| | | </main> |
| | | </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) { |
| | | 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; |
| | | $('#animate').click(function () { |
| | | crnAnimate(1, $('#val').val()); |
| | | }); |
| | | var crn3Position = 0; |
| | | var crn4Position = 0; |
| | | var crn5Position = 0; |
| | | |
| | | // 初始化 |
| | | getSitesInfo(); |
| | | getCrnInfo(); |
| | | getSystemRunningStatus(); |
| | | getBarcodeInfo(); |
| | | getScaleInfo(); |
| | | // 实时访问 |
| | | setInterval(function () { |
| | | getCrnInfo(); |
| | | getSystemRunningStatus(); |
| | | getBarcodeInfo(); |
| | | getScaleInfo(); |
| | | }, 1000); |
| | | setInterval(function () { |
| | | getSitesInfo(); |
| | | }, 3000); |
| | | |
| | | // 系统运行开关 |
| | | function systemSwitch() { |
| | | if (parent.systemRunning) { |
| | | layer.prompt({title: '请输入口令,并停止 WCS 系统', formType: 1, shadeClose: true}, function (pass, idx) { |
| | | layer.close(idx); |
| | | doSwitch(0, pass); // 停止wcs系统 |
| | | }); |
| | | } else { |
| | | doSwitch(1); // 启动wcs系统 |
| | | } |
| | | } |
| | | |
| | | // 请求服务器控制wcs系统运行状态 |
| | | function doSwitch(operatorType, password) { |
| | | // 加载tips |
| | | var index = layer.load(1, { |
| | | shade: [0.1, '#fff'] |
| | | }); |
| | | $.ajax({ |
| | | url: baseUrl + "/console/system/switch", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | // async: false, |
| | | data: { |
| | | operatorType: operatorType, |
| | | password: password |
| | | }, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | layer.close(index); |
| | | if (res.code === 200) { |
| | | if (res.data.status) { |
| | | $('#system-icon').attr("class", "system-icon-open"); |
| | | $('#system-run-desc').html("系统运行中..."); |
| | | parent.systemRunning = true; |
| | | } else { |
| | | $('#system-icon').attr("class", "system-icon-close"); |
| | | $('#system-run-desc').html("系统已停止!"); |
| | | parent.systemRunning = false; |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | | } else { |
| | | alert(res.msg); |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | } |
| | | |
| | | // 获取wcs系统运行状态 |
| | | function getSystemRunningStatus() { |
| | | $.ajax({ |
| | | url: baseUrl + "/console/system/running/status", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | if (res.data.status) { |
| | | $('#system-icon').attr("class", "system-icon-open"); |
| | | $('#system-run-desc').html("系统运行中..."); |
| | | parent.systemRunning = true; |
| | | } else { |
| | | $('#system-icon').attr("class", "system-icon-close"); |
| | | $('#system-run-desc').html("系统已停止!"); |
| | | parent.systemRunning = false; |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 输送设备实时数据获取 |
| | | function getSitesInfo() { |
| | | $.ajax({ |
| | | url: baseUrl + "/console/latest/data/site", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | console.log(res); |
| | | if (res.code === 200) { |
| | | var sites = res.data; |
| | | for (var i = 0; i < sites.length; i++) { |
| | | var siteEl = $("#site-" + sites[i].siteId); |
| | | console.log(sites[i].siteId) |
| | | siteEl.attr("class", "site " + sites[i].siteStatus); |
| | | // siteEl.attr("class", "site site-auto-run-id"); |
| | | 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 === '16' || sites[i].siteId === '016') { |
| | | |
| | | carAnimate(Number(sites[i].siteId), Number(sites[i].nearbySta)); |
| | | } |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 堆垛机实时数据获取 |
| | | function getCrnInfo() { |
| | | $.ajax({ |
| | | url: baseUrl + "/console/latest/data/crn", |
| | | 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 = 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); |
| | | // crns[i].bay = 15; |
| | | |
| | | var offSet = 0; |
| | | unit = 60; |
| | | offSet = 325; |
| | | |
| | | |
| | | if(crns[i].bay === 1){ |
| | | crnEl.animate({left: offSet + 'px'}, 1000); |
| | | } else { |
| | | crnEl.animate({left: (offSet - unit + (crns[i].bay * unit)) + 'px'}, 1000); |
| | | } |
| | | |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 扫码器实时数据获取 |
| | | function getBarcodeInfo() { |
| | | $.ajax({ |
| | | url: baseUrl + "/console/latest/data/barcode", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | 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); |
| | | } |
| | | } 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: |
| | | $("#crn1").animate({left: leftVal+'px'}, 1000); |
| | | $("#crn-1").animate({left: leftVal + 'px'}, 1000); |
| | | crn1Position = leftVal; |
| | | break; |
| | | case 2: |
| | | $("#crn2").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 |
| | | } |
| | | } |
| | | |
| | | $('.item').on('click', function () { |
| | | layer.open({ |
| | | type: 1, |
| | | shadeClose: true, //点击遮罩关闭层 |
| | | content: 'text' |
| | | }); |
| | | }) |
| | | // 小车偏移动画 |
| | | function carAnimate(id, target) { |
| | | // debugger |
| | | var targetTop = 0; |
| | | if (id === 16 || id === '16' || id === '016') { |
| | | switch (target) { |
| | | case 1: |
| | | targetTop += 827; |
| | | break; |
| | | case 2: |
| | | targetTop += 765; |
| | | break; |
| | | case 3: |
| | | targetTop += 651; |
| | | break; |
| | | case 4: |
| | | targetTop += 589; |
| | | break; |
| | | case 5: |
| | | targetTop += 505; |
| | | break; |
| | | case 6: |
| | | targetTop += 443; |
| | | break; |
| | | case 7: |
| | | targetTop += 362; |
| | | break; |
| | | case 8: |
| | | targetTop += 297; |
| | | break; |
| | | case 9: |
| | | targetTop += 243; |
| | | break; |
| | | case 10: |
| | | targetTop += 129; |
| | | break; |
| | | default: |
| | | return; |
| | | } |
| | | } else { |
| | | return; |
| | | } |
| | | |
| | | </script> |
| | | </html> |
| | | $("#site-0" + id).animate({top: targetTop + 'px'}, 1000); |
| | | } |
| | | |
| | | |
| | | </script> |