| | |
| | | <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> |