| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <!--5层 28列 1120库位--> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title>Title</title> |
|---|
| | | <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/common.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/layer/layer.js"></script> |
|---|
| | | <style> |
|---|
| | | /* 头部 */ |
|---|
| | | header { |
|---|
| | | height: 20%; |
|---|
| | | border: 1px solid red; |
|---|
| | | } |
|---|
| | | /* 主体 */ |
|---|
| | | main { |
|---|
| | | height: 80%; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main-part { |
|---|
| | | position: absolute; |
|---|
| | | top: 100px; |
|---|
| | | left: 400px; |
|---|
| | | /*transform: translate(-50%, 0);*/ |
|---|
| | | } |
|---|
| | | /* 堆垛机轨道 */ |
|---|
| | | .pathway { |
|---|
| | | border: 1px solid #000; |
|---|
| | | position: absolute; |
|---|
| | | background-color:#eee!important; |
|---|
| | | color: #000000 !important; |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 10px; |
|---|
| | | z-index: -1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <header> |
|---|
| | | <span>描述信息</span> |
|---|
| | | </header> |
|---|
| | | <main> |
|---|
| | | <!-- 货架 + 堆垛机 + 入库点 + 出库点 --> |
|---|
| | | <div class="main-part"> |
|---|
| | | <!-- 系统运行状态 --> |
|---|
| | | <div class="system-state"> |
|---|
| | | <div class="system-icon"></div> |
|---|
| | | <span>系统运行中...</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!--输送线--> |
|---|
| | | <!-- 信息展示 --> |
|---|
| | | <div class="data-window"> |
|---|
| | | <!-- 标题 --> |
|---|
| | | <h1>自动仓库 WCS 监控图</h1> |
|---|
| | | |
|---|
| | | <!--第一排--> |
|---|
| | | <span>1#</span> |
|---|
| | | <!-- 货架 --> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <!-- 堆垛机 --> |
|---|
| | | <div class="crn"> |
|---|
| | | <hr class="pathway"> |
|---|
| | | <div class="machine"></div> |
|---|
| | | </div> |
|---|
| | | <!-- 货架 --> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <br> |
|---|
| | | |
|---|
| | | <!--第二排--> |
|---|
| | | <span>2#</span> |
|---|
| | | <!-- 货架 --> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <!-- 堆垛机 --> |
|---|
| | | <div class="crn"> |
|---|
| | | <hr class="pathway"> |
|---|
| | | <div class="machine"></div> |
|---|
| | | </div> |
|---|
| | | <!-- 货架 --> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <div class="stock-group"> |
|---|
| | | <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> |
|---|
| | | <!-- 颜色提示 --> |
|---|
| | | <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> |
|---|
| | | <div class="tips-item"> |
|---|
| | | <label>输送设备状态颜色: </label> |
|---|
| | | <div class="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> |
|---|
| | | </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;">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> |
|---|
| | | |
|---|
| | | <!-- 右输送线 --> |
|---|
| | | <!--<input id="val" type="text">--> |
|---|
| | | <!--<button id="animate">animate</button>--> |
|---|
| | | </main> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | var crn1Position = 0; |
|---|
| | | var crn2Position = 0; |
|---|
| | | // 初始化 |
|---|
| | | getSitesInfo(); |
|---|
| | | getCrnInfo(); |
|---|
| | | // 实时访问 |
|---|
| | | setInterval(function () { |
|---|
| | | getCrnInfo(); |
|---|
| | | }, 500); |
|---|
| | | setInterval(function () { |
|---|
| | | getSitesInfo(); |
|---|
| | | }, 3000); |
|---|
| | | |
|---|
| | | // 输送设备实时数据获取 |
|---|
| | | function getSitesInfo(){ |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+ "/console/latest/data/site", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | var sites = res.data; |
|---|
| | | for (var i = 0; i < sites.length; i++){ |
|---|
| | | $("#site-"+sites[i].siteId).attr("class", "site " + sites[i].siteStatus); |
|---|
| | | } |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | top.location.href = baseUrl+"/login"; |
|---|
| | | } else { |
|---|
| | | alert(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 堆垛机实时数据获取 |
|---|
| | | function getCrnInfo(){ |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+ "/console/latest/data/crn", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | var crns = res.data; |
|---|
| | | for (var i = 0; i < crns.length; i++){ |
|---|
| | | crnAnimate(crns[i].crnId, crns[i].offset); |
|---|
| | | } |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | top.location.href = baseUrl+"/login"; |
|---|
| | | } else { |
|---|
| | | alert(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){ |
|---|
| | | |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | top.location.href = baseUrl+"/login"; |
|---|
| | | } else { |
|---|
| | | alert(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 堆垛机偏移动画 |
|---|
| | | function crnAnimate(id, leftVal) { |
|---|
| | | switch (id) { |
|---|
| | | case 1: |
|---|
| | | $("#crn1").animate({left: leftVal+'px'}, 1000); |
|---|
| | | crn1Position = leftVal; |
|---|
| | | break; |
|---|
| | | case 2: |
|---|
| | | $("#crn2").animate({left: leftVal+'px'}, 1000); |
|---|
| | | crn2Position = leftVal; |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | $('.item').on('click', function () { |
|---|
| | | layer.open({ |
|---|
| | | type: 1, |
|---|
| | | shadeClose: true, //点击遮罩关闭层 |
|---|
| | | content: 'text' |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | $('#animate').click(function () { |
|---|
| | | crnAnimate(1, $('#val').val()); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
