| | |
| | | <!DOCTYPE html> |
| | | <html lang="en"> |
| | | <!--5层 28列 1120库位--> |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <title>WCS控制中心</title> |
| | |
| | | <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> |
| | | .system-state { |
| | | position: absolute; |
| | | top: 40px; |
| | | right: 20px; |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <header> |
| | | <span>描述信息</span> |
| | | <h1>自动仓库 WCS 监控图</h1> |
| | | <!-- 状态 --> |
| | | <div class="machine-state"> |
| | | <div class="crn-state-group"> |
| | | <span>堆垛机状态:</span> |
| | | <span class="crn-state" style="background-color: #21ff3a">自动</span> |
| | | <span class="crn-state" style="background-color: red">异常</span> |
| | | </div> |
| | | <div class="site-state-group"> |
| | | <span>站点状态:</span> |
| | | <span class="site-state" style="background-color: #21ff3a;">自动</span> |
| | | <span class="site-state" style="background-color: red;">异常</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 系统运行 --> |
| | | <div class="system-state"> |
| | | <div class="system-icon"></div> |
| | | </div> |
| | | |
| | | </header> |
| | | <main> |
| | | |
| | |
| | | <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"> |
| | |
| | | <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> |
| | | <!-- 堆垛机 --> |
| | |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | <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"> |
| | |
| | | <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> |
| | | <!-- 堆垛机 --> |
| | |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | </main> |
| | | |
| | | |
| | | <!-- 弹出层 --> |
| | | <form id="msg" style="display: none"> |
| | | <input name="name" type="text"> |
| | | <input name="password" type="password"> |
| | | <button>确定</button> |
| | | </form> |
| | | </body> |
| | | <script> |
| | | var crn1Position = 0; |
| | |
| | | layer.open({ |
| | | type: 1, |
| | | shadeClose: true, //点击遮罩关闭层 |
| | | content: $("#msg") |
| | | content: 'text' |
| | | }); |
| | | }) |
| | | |