|  |  | 
 |  |  |     <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; | 
 |  |  |         header { | 
 |  |  |             height: 20%; | 
 |  |  |             opacity: 0.8; | 
 |  |  |             position: relative; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         /* 系统运行状态 */ | 
 |  |  |         .system-state { | 
 |  |  |             float: left; | 
 |  |  |             margin-left: 30px; | 
 |  |  |             margin-top: 30px; | 
 |  |  |             text-align: center; | 
 |  |  |             color: #2d6aff; | 
 |  |  |         } | 
 |  |  |         .system-icon { | 
 |  |  |             width: 100px; | 
 |  |  |             height: 100px; | 
 |  |  | 
 |  |  |             cursor: pointer; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         /* 状态显示 */ | 
 |  |  |         .data-window { | 
 |  |  |             width: 70%; | 
 |  |  |             text-align: center; | 
 |  |  |         } | 
 |  |  |         .data-window h1 { | 
 |  |  |             font-size: 3em; | 
 |  |  |             margin: 0; | 
 |  |  |             letter-spacing: 1px; | 
 |  |  |         } | 
 |  |  |         .crn-label, .site-label { | 
 |  |  |             display: inline-block; | 
 |  |  |             width: 15%; | 
 |  |  |             text-align: right; | 
 |  |  |             margin-bottom: 5px; | 
 |  |  |             font-size: 13px; | 
 |  |  |         } | 
 |  |  |         /* 堆垛机状态 */ | 
 |  |  |         .crn-state-group { | 
 |  |  |             text-align: left; | 
 |  |  |         } | 
 |  |  |         .crn-state { | 
 |  |  |             display: inline-block; | 
 |  |  |             width: 50px; | 
 |  |  |             text-align: center; | 
 |  |  |         } | 
 |  |  |         /* 站点状态 */ | 
 |  |  |         .site-state-group { | 
 |  |  |             text-align: left; | 
 |  |  |         } | 
 |  |  |         .site-state { | 
 |  |  |             display: inline-block; | 
 |  |  |             width: 50px; | 
 |  |  |             text-align: center; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |         /* 分割线 */ | 
 |  |  |         .header-hr { | 
 |  |  |             border-radius: 5px; | 
 |  |  |             border: 1px solid #777; | 
 |  |  |             width: 80%; | 
 |  |  |             position: absolute; | 
 |  |  |             bottom: 0; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |     </style> | 
 |  |  | </head> | 
 |  |  | <body> | 
 |  |  | <header> | 
 |  |  |     <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> | 
 |  |  |         <span>系统运行中...</span> | 
 |  |  |     </div> | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     <!-- 信息展示 --> | 
 |  |  |     <div class="data-window"> | 
 |  |  |         <!--<h1>自动仓库 WCS 监控图</h1>--> | 
 |  |  |         <!--<!–<div class="crn-state-group">–>--> | 
 |  |  |             <!--<!–<label class="crn-label">堆垛机状态颜色:</label>–>--> | 
 |  |  |             <!--<!–<span class="crn-state" style="background-color: #21ff3a">自动</span>–>--> | 
 |  |  |             <!--<!–<span class="crn-state" style="background-color: red">异常</span>–>--> | 
 |  |  |         <!--<!–</div>–>--> | 
 |  |  |         <!--<!–<div class="site-state-group">–>--> | 
 |  |  |             <!--<!–<label class="site-label">输送设备状态颜色:</label>–>--> | 
 |  |  |             <!--<!–<span class="site-state" style="background-color: #21ff3a;">自动</span>–>--> | 
 |  |  |             <!--<!–<span class="site-state" style="background-color: red;">异常</span>–>--> | 
 |  |  |         <!--<!–</div>–>--> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  |     <!--分割线--> | 
 |  |  |     <hr class="header-hr"> | 
 |  |  | </header> | 
 |  |  | <main> | 
 |  |  |  | 
 |  |  | 
 |  |  |     <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-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> |