| | |
| | | <html lang="en"> |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <title>Title</title> |
| | | <title>WCS控制中心</title> |
| | | <meta name="renderer" content="webkit"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
| | |
| | | <link rel="stylesheet" type="text/css" href="../static/css/common.css"> |
| | | <link rel="stylesheet" type="text/css" href="../static/css/console.css"> |
| | | <style> |
| | | .main-part { |
| | | position: absolute; |
| | | top: 100px; |
| | | left: 400px; |
| | | /*transform: translate(-50%, 0);*/ |
| | | } |
| | | |
| | | /* 站点 */ |
| | | .site { |
| | | height: 20px; |
| | | border: 1px solid red; |
| | | border-radius: 3px; |
| | | cursor: pointer; |
| | | width: 50px; |
| | | text-align: center; |
| | | background-color: #21ff3a; |
| | | font-size: 13px; |
| | | float: left; |
| | | } |
| | | .site:hover { |
| | | opacity: 0.7; |
| | | } |
| | | /* 无效站点 */ |
| | | /* 无效站点(必须在site下面) */ |
| | | .site-none { |
| | | border: none; |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .main-part { |
| | | position: absolute; |
| | | top: 200px; |
| | | left: 400px; |
| | | /*transform: translate(-50%, 0);*/ |
| | | } |
| | | |
| | | /* --------- 输送线总成 --------- */ |
| | | /* 输送线第一列 */ |
| | | .site-row-1 { |
| | | position: absolute; |
| | | left: 200px; |
| | | top: 72px; |
| | | } |
| | | .site-row-1 .site { |
| | | width: 100px; |
| | | } |
| | | /* 输送线第二列 */ |
| | | .site-row-2 { |
| | | position: absolute; |
| | | left: 300px; |
| | | top: 72px; |
| | | } |
| | | .site-row-2 .site { |
| | | width: 100px; |
| | | } |
| | | /* 输送线第三列 */ |
| | | .site-row-3 { |
| | | position: absolute; |
| | | left: 400px; |
| | | top: 72px; |
| | | width: 100px; |
| | | } |
| | | .site-row-3 .site { |
| | | float: left; |
| | | width: 100px; |
| | | } |
| | | /* 输送线第四列 */ |
| | | .site-row-4 { |
| | | position: absolute; |
| | | left: 500px; |
| | | top: 72px; |
| | | width: 100px; |
| | | } |
| | | .site-row-4 .site { |
| | | float: right; |
| | | width: 100px; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | |
| | | <main> |
| | | |
| | | <!-- 左输送线 --> |
| | | <div class="line-left"> |
| | | <!-- 第一列 --> |
| | | <div class="row-1"> |
| | | |
| | | </div> |
| | | <!-- 第二列 --> |
| | | <div class="row-2"> |
| | | |
| | | </div> |
| | | <!-- 第一列(宽度 100px)--> |
| | | <div class="site-row-1"> |
| | | <div id="site-1" class="site" style="width: 80px; height: 50px;line-height: 50px">1[9999]</div> |
| | | <div id="site-2" class="site" >2</div> |
| | | <div id="site-3" class="site" style="width: 80px; height: 30px;line-height: 30px">3</div> |
| | | <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-8" class="site" style="width: 80px; height: 42px;line-height: 40px">8</div> |
| | | <div id="site-9" class="site" >9</div> |
| | | </div> |
| | | |
| | | <!-- 第二列(宽度 100px) --> |
| | | <div class="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-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-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> |
| | | <!-- 第三列(宽度 100px)--> |
| | | <div class="site-row-3"> |
| | | <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div> |
| | | <div id="site-29" class="site" style="width: 50px;">29</div> |
| | | <div id="site-28" class="site" style="width: 50px;">28</div> |
| | | <div class="site-none" style="width: 80px; height: 50px;line-height: 30px"></div> |
| | | <div id="site-24" class="site" >24</div> |
| | | </div> |
| | | <!-- 第三列(宽度 100px)--> |
| | | <div class="site-row-4"> |
| | | <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div> |
| | | <div id="site-27" class="site" >27</div> |
| | | <div id="site-26" class="site" style="width: 80px; height: 30px;line-height: 30px">26</div> |
| | | <div id="site-25" class="site" >25</div> |
| | | </div> |
| | | |
| | | <!-- 货架 + 堆垛机 + 入库站点 + 出库站点 --> |
| | | <div class="main-part"> |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div id="site-21" class="site">21</div> |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <!-- 堆垛机 --> |
| | | <div class="crn"> |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div class="site site-none"> </div> |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <br> |
| | | |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div id="site-14" class="site">14</div> |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <!-- 堆垛机 --> |
| | | <div class="crn"> |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <div class="site site-none"> </div> |
| | |
| | | <button class="item">22</button> |
| | | <button class="item">23</button> |
| | | <button class="item">24</button> |
| | | <div class="site site-none"> </div> |
| | | </div> |
| | | </div> |
| | | |