|  |  | 
 |  |  | <!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' | 
 |  |  |         }); | 
 |  |  |     }) | 
 |  |  |  |