| | |
| | | <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%; |
| | | opacity: 0.8; |
| | | position: relative; |
| | | } |
| | | /* 分割线 */ |
| | | .header-hr { |
| | | border-radius: 5px; |
| | | border: 1px solid #777; |
| | | width: 80%; |
| | | position: absolute; |
| | | bottom: 0; |
| | | } |
| | | /* 系统运行状态 */ |
| | | .system-state { |
| | | float: left; |
| | | margin-left: 30px; |
| | | margin-top: 30px; |
| | | text-align: center; |
| | | color: #2d6aff; |
| | | } |
| | | .system-icon { |
| | | width: 100px; |
| | | height: 100px; |
| | | background-image: url("../static/image/stop48.png"); |
| | | background-repeat: no-repeat; |
| | | background-size:100% 100%; |
| | | background-position: top center; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | /* 状态显示 */ |
| | | .data-window { |
| | | float: left; |
| | | width: 70%; |
| | | text-align: center; |
| | | } |
| | | .data-window h1 { |
| | | font-size: 3em; |
| | | margin: 0; |
| | | letter-spacing: 1px; |
| | | font-weight: inherit; |
| | | } |
| | | |
| | | /* 堆垛机状态 */ |
| | | .crn-state-group { |
| | | text-align: left; |
| | | font-size: 12px; |
| | | } |
| | | .crn-label { |
| | | float: left; |
| | | width: 20%; |
| | | text-align: right; |
| | | margin-bottom: 5px; |
| | | font-size: 13px; |
| | | } |
| | | .crn-state { |
| | | display: inline-block; |
| | | width: 50px; |
| | | text-align: center; |
| | | } |
| | | /* 站点状态 */ |
| | | .site-label { |
| | | width: 20%; |
| | | text-align: right; |
| | | margin-bottom: 5px; |
| | | font-size: 13px; |
| | | } |
| | | .site-state-group { |
| | | display: inline-block; |
| | | text-align: left; |
| | | } |
| | | .site-state-group .site { |
| | | float: left; |
| | | height: 22px; |
| | | width: auto; |
| | | padding: 0 10px; |
| | | border: none; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | |
| | | |
| | | <!-- 信息展示 --> |
| | | <div class="data-window"> |
| | | <!-- 标题 --> |
| | | <h1>自动仓库 WCS 监控图</h1> |
| | | |
| | | <div> |
| | | <label class="crn-label">堆垛机状态颜色:</label> |
| | | <div class="crn-state-group"> |
| | | <span class="crn-state" style="background-color: #21ff3a">自动</span> |
| | | <span class="crn-state" style="background-color: red">异常</span> |
| | | <!-- 颜色提示 --> |
| | | <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> |
| | | <label class="site-label">输送设备状态颜色:</label> |
| | | <div class="site-state-group"> |
| | | <div class="site site-auto">自动</div> |
| | | <div class="site site-unauto">非自动/手动</div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | <!--分割线--> |
| | | <hr class="header-hr"> |
| | | <!--<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 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: 82px;line-height: 82px">7</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> |
| | |
| | | <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-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: 42px;line-height: 40px">16</div> |
| | | <div id="site-15" class="site" style="width: 80px; height: 42px;line-height: 40px">15</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 class="main-part"> |
| | | <!--第一排--> |
| | | <span class="row-no">1#</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> |
| | | <br> |
| | | |
| | | <!--第二排--> |
| | | <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 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="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 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> |
| | | <!--<input id="val" type="text">--> |
| | | <!--<button id="animate">animate</button>--> |
| | | </main> |
| | | |
| | | |
| | | </body> |
| | | <script> |
| | | |
| | | var crn1Position = 0; |
| | | var crn2Position = 0; |
| | | $('#animate').click(function () { |
| | | crnAnimate(1, $('#val').val()); |
| | | }); |
| | | // 初始化 |
| | | 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) { |
| | |
| | | } |
| | | } |
| | | |
| | | |
| | | $('.item').on('click', function () { |
| | | layer.open({ |
| | | type: 1, |
| | | shadeClose: true, //点击遮罩关闭层 |
| | | content: 'text' |
| | | }); |
| | | }) |
| | | }); |
| | | $('#animate').click(function () { |
| | | crnAnimate(1, $('#val').val()); |
| | | }); |
| | | |
| | | </script> |
| | | </html> |