|  |  | 
 |  |  | <!DOCTYPE html> | 
 |  |  | <html> | 
 |  |  | <html lang="en"> | 
 |  |  | <head> | 
 |  |  |     <meta charset="utf-8"> | 
 |  |  |     <title>WCS控制中心</title> | 
 |  |  |     <!--<link rel="stylesheet" type="text/css" href="../static/css/common.css">--> | 
 |  |  |     <link rel="stylesheet" href="../static/css/console.css"> | 
 |  |  |     <!--      <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">--> | 
 |  |  |     <link rel="stylesheet" href="../static/css/animate.min.css"> | 
 |  |  |     <link rel="stylesheet" href="../static/css/toggle-switch.css"> | 
 |  |  |     <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> | 
 |  |  |     <script src="../static/js/layer/layer.js"></script> | 
 |  |  |     <script type="text/javascript" src="../static/js/common.js"></script> | 
 |  |  | 
 |  |  |         <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> | 
 |  |  |     </header> | 
 |  |  |     <main class="main"> | 
 |  |  |         <!--第1列(宽度 70px) --> | 
 |  |  |         <div class="site-row site-row-1"> | 
 |  |  |             <div class="site-k" style="height:39px;width:70px;"></div> | 
 |  |  |             <div id="site-173" class="site" style="height: 18px;line-height: 18px;margin-bottom: 85px">173</div> | 
 |  |  |         </div> | 
 |  |  |         <!--第2列(宽度 70px)--> | 
 |  |  |         <div class="site-row site-row-2"> | 
 |  |  |             <div id="site-175" class="site" style="height: 18px;line-height: 18px;">175</div> | 
 |  |  |             <div id="site-174" class="site" style="height: 19px;line-height: 19px;">174</div> | 
 |  |  |             <div id="site-172" class="site" style="height: 18px;line-height: 18px;">172</div> | 
 |  |  |             <div class="site-k" style="height: 246px;width:70px;"></div> | 
 |  |  |             <div id="site-182" class="site" style="height: 18px;line-height: 18px;">182</div> | 
 |  |  |         </div> | 
 |  |  |         <!-- 第3列(宽度 70px) --> | 
 |  |  |         <div class="site-row site-row-3"> | 
 |  |  |             <div id="site-176" class="site" style="height: 18px;line-height: 18px;width:162px;">176</div> | 
 |  |  |             <div class="site-k" style="height: 19px;width:162px;"></div> | 
 |  |  |             <div> | 
 |  |  |                 <div id="site-171" class="site" style="height: 18px;line-height: 18px;position: absolute;clear: right">171</div> | 
 |  |  |                 <div id="site-170" class="site" style="height: 18px;line-height: 18px;width:80px;float: right">170</div> | 
 |  |  |         <!--楼层按钮--> | 
 |  |  |             <div id="floorBtnBox"> | 
 |  |  |                 <button class="floorBtn  btn-16" onclick="changFloor(this,1)" style="margin-top: 150px">1F</button> | 
 |  |  |                 <button class="floorBtn  btn-16" onclick="changFloor(this,2)" style="margin-top: 200px">2F</button> | 
 |  |  |                 <button class="floorBtn  btn-16" onclick="changFloor(this,3)" style="margin-top: 250px">3F</button> | 
 |  |  |                 <button class="floorBtn  btn-16" onclick="changFloor(this,4)" style="margin-top: 300px">4F</button> | 
 |  |  |             </div> | 
 |  |  |             <div class="site-k" style="height: 246px;width:70px;"></div> | 
 |  |  |             <div> | 
 |  |  |                 <div id="site-181" class="site" style="height: 18px;line-height: 18px;position: absolute;clear: right">181</div> | 
 |  |  |                 <div id="site-180" class="site" style="height: 18px;line-height: 18px;width:80px;float: right">180</div> | 
 |  |  |             </div> | 
 |  |  |  | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <!--<!– 第5列(宽度 70px) –>--> | 
 |  |  |         <div class="site-row site-row-5"> | 
 |  |  |             <div id="site-163" class="site" style="height: 28.5px;line-height: 28.5px">163</div> | 
 |  |  |             <div id="site-162" class="site" style="height: 28.5px;line-height: 28.5px">162</div> | 
 |  |  |             <div id="site-161" class="site" style="height: 71px;line-height: 71px">161</div> | 
 |  |  |             <div id="site-160" class="site" style="height: 28.5px;line-height: 28.5px">160</div> | 
 |  |  |             <div id="site-159" class="site" style="height: 28.5px;line-height: 28.5px">159</div> | 
 |  |  |             <div id="site-158" class="site" style="height: 71px;line-height: 71px">158</div> | 
 |  |  |             <div id="site-157" class="site" style="height: 28.5px;line-height: 28.5px">157</div> | 
 |  |  |             <div id="site-156" class="site" style="height: 28.5px;line-height: 28.5px">156</div> | 
 |  |  |             <div id="site-155" class="site" style="height: 71px;line-height: 71px">155</div> | 
 |  |  |             <div id="site-154" class="site" style="height: 28.5px;line-height: 28.5px">154</div> | 
 |  |  |             <div id="site-153" class="site" style="height: 28.5px;line-height: 28.5px">153</div> | 
 |  |  |             <div id="site-152" class="site" style="height: 71px;line-height: 71px">152</div> | 
 |  |  |             <div id="site-151" class="site" style="height: 28.5px;line-height: 28.5px">151</div> | 
 |  |  |             <div id="site-150" class="site" style="height: 28.5px;line-height: 28.5px">150</div> | 
 |  |  |         </div> | 
 |  |  |         <!--<!– 第6列(宽度 70px) –>--> | 
 |  |  |         <div class="site-row site-row-6"> | 
 |  |  |             <div id="site-120" class="site" style="height: 28.5px;line-height: 28.5px">120</div> | 
 |  |  |             <div id="site-121" class="site" style="height: 28.5px;line-height: 28.5px">121</div> | 
 |  |  |             <div id="site-122" class="site" style="height: 71px;line-height: 71px">122</div> | 
 |  |  |             <div id="site-123" class="site" style="height: 28.5px;line-height: 28.5px">123</div> | 
 |  |  |             <div id="site-124" class="site" style="height: 28.5px;line-height: 28.5px">124</div> | 
 |  |  |             <div id="site-125" class="site" style="height: 71px;line-height: 71px">125</div> | 
 |  |  |             <div id="site-126" class="site" style="height: 28.5px;line-height: 28.5px">126</div> | 
 |  |  |             <div id="site-127" class="site" style="height: 28.5px;line-height: 28.5px">127</div> | 
 |  |  |             <div id="site-128" class="site" style="height: 71px;line-height: 71px">128</div> | 
 |  |  |             <div id="site-129" class="site" style="height: 28.5px;line-height: 28.5px">129</div> | 
 |  |  |             <div id="site-130" class="site" style="height: 28.5px;line-height: 28.5px">130</div> | 
 |  |  |             <div id="site-131" class="site" style="height: 71px;line-height: 71px">131</div> | 
 |  |  |             <div id="site-132" class="site" style="height: 28.5px;line-height: 28.5px">132</div> | 
 |  |  |             <div id="site-133" class="site" style="height: 28.5px;line-height: 28.5px">133</div> | 
 |  |  |         </div> | 
 |  |  |             <button class="floorBtn  btn-16" onclick="testMove()" style="margin-top: 350px;font-size: 14px;">测试移动车</button> | 
 |  |  |             <button class="floorBtn  btn-16" onclick="resetMap()" style="margin-top: 400px;font-size: 14px;">重置地图</button> | 
 |  |  |  | 
 |  |  |         <!-- 货架 + 堆垛机 + 入库站点 --> | 
 |  |  |         <div class="main-part"> | 
 |  |  |             <!-- 第一组 --> | 
 |  |  |             <div class="lane" style="margin-bottom: 280px"> | 
 |  |  |                 <!-- 货架 --> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">32#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">31#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 3号堆垛机 --> | 
 |  |  |                 <div class="crn"> | 
 |  |  |                     <hr class="pathway"> | 
 |  |  |                     <div id="crn-3" class="machine"></div> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 货架 --> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">30#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">29#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">28#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">27#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <span class="row-no"></span> | 
 |  |  |                 <!-- 货架 --> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">26#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">25#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">24#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">23#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">22#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">21#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">20#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">19#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 货架 --> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">18#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 堆垛机 --> | 
 |  |  |                 <div class="crn"> | 
 |  |  |                     <hr class="pathway"> | 
 |  |  |                     <div id="crn-2" class="machine"></div> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">17#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">16#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">15#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">14#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">13#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">12#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">11#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">10#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">9#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">8#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <span class="row-no"></span> | 
 |  |  |                 <!-- 货架 --> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">7#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">6#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">5#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">4#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">3#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">2#</span> | 
 |  |  |                 </div> | 
 |  |  |                 <!-- 堆垛机 --> | 
 |  |  |                 <div class="crn"> | 
 |  |  |                     <hr class="pathway"> | 
 |  |  |                     <div id="crn-1" class="machine"></div> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="stock-group"> | 
 |  |  |                     <button class="item">1</button> | 
 |  |  |                     <button class="item">2</button> | 
 |  |  |                     <button class="item">3</button> | 
 |  |  |                     <button class="item">4</button> | 
 |  |  |                     <button class="item">5</button> | 
 |  |  |                     <button class="item">6</button> | 
 |  |  |                     <button class="item">7</button> | 
 |  |  |                     <button class="item">8</button> | 
 |  |  |                     <button class="item">9</button> | 
 |  |  |                     <button class="item">10</button> | 
 |  |  |                     <button class="item">11</button> | 
 |  |  |                     <button class="item">12</button> | 
 |  |  |                     <button class="item">13</button> | 
 |  |  |                     <button class="item">14</button> | 
 |  |  |                     <button class="item">15</button> | 
 |  |  |                     <button class="item">16</button> | 
 |  |  |                     <button class="item">17</button> | 
 |  |  |                     <button class="item">18</button> | 
 |  |  |                     <button class="item">19</button> | 
 |  |  |                     <button class="item">20</button> | 
 |  |  |                     <button class="item">21</button> | 
 |  |  |                     <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> | 
 |  |  |                     <span class="row-no">1#</span> | 
 |  |  |                 </div> | 
 |  |  |             <div class="lane" id="mapDataId" style="margin-bottom: 280px"> | 
 |  |  |  | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     </main> | 
 |  |  | 
 |  |  |         <div class="system-state"> | 
 |  |  |             <div class="body-head">总开关</div> | 
 |  |  |             <div class="switch"> | 
 |  |  |                 <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div> | 
 |  |  |                 <label id="system-toggle" class="toggle-switch" style="margin-left: 20px;"> | 
 |  |  |                     <input id="system-toggle-checked" checked="checked" type="checkbox"> | 
 |  |  |                     <div class="button"> | 
 |  |  |                         <div class="light"></div> | 
 |  |  |                         <div class="dots"></div> | 
 |  |  |                         <div class="characters"></div> | 
 |  |  |                         <div class="shine"></div> | 
 |  |  |                         <div class="shadow"></div> | 
 |  |  |                     </div> | 
 |  |  |                 </label> | 
 |  |  |  | 
 |  |  |                 <div class="switch_r"> | 
 |  |  |                     <p>系统状态</p> | 
 |  |  |                     <p id="system-run-desc">系统运行中</p> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!-- 堆垛机状态 --> | 
 |  |  |         <div class="machine-status"> | 
 |  |  |             <div class="body-head">堆垛机状态</div> | 
 |  |  |             <div class="state"> | 
 |  |  |                 <span>堆垛机 1</span> | 
 |  |  |                 <span class="state-ss machine-put-flag   ">入库</span> | 
 |  |  |         <!-- 四向穿梭车状态 --> | 
 |  |  |         <div class="line-status"> | 
 |  |  |             <div class="body-head">穿梭车状态</div> | 
 |  |  |             <div id="shuttle-status-box"> | 
 |  |  |             </div> | 
 |  |  |             <div class="state"> | 
 |  |  |                 <span>堆垛机 2</span> | 
 |  |  |                 <span class="state-ss machine-auto-flag   ">自动</span> | 
 |  |  |             <div class="button"><span>所有状态</span></div> | 
 |  |  |             <div class="button item-group"> | 
 |  |  |                 <span class="shuttle-idle">空闲</span> | 
 |  |  |                 <span class="shuttle-working">作业中</span> | 
 |  |  |                 <span class="shuttle-waiting">等待确认</span> | 
 |  |  |                 <span class="shuttle-charging">充电中</span> | 
 |  |  |                 <span class="shuttle-charging-waiting">充电任务等待确认</span> | 
 |  |  |                 <span class="shuttle-fixing">故障修复中</span> | 
 |  |  |                 <span class="shuttle-offline">离线</span> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!-- 提升机状态 --> | 
 |  |  |         <div class="line-status"> | 
 |  |  |             <div class="body-head">提升机状态</div> | 
 |  |  |             <div id="lift-status-box"> | 
 |  |  |  | 
 |  |  |             </div> | 
 |  |  |             <div class="button"><span>所有状态</span></div> | 
 |  |  |             <div class="button item-group"> | 
 |  |  |                 <span class="machine-put-flag">入库</span> | 
 |  |  |                 <span class="machine-take-flag">出库</span> | 
 |  |  |                 <span class="machine-stock-move-flag">库到库</span> | 
 |  |  |                 <span class="machine-site-move-flag">站到站</span> | 
 |  |  |                 <span class="machine-p-move-flag">PToP</span> | 
 |  |  |                 <span class="machine-error-flag">异常</span> | 
 |  |  |                 <span class="machine-auto-flag">自动</span> | 
 |  |  |                 <span class="machine-unauto-flag">非自动/手动</span> | 
 |  |  |                 <span class="lift-idle">空闲</span> | 
 |  |  |                 <span class="lift-working">作业中</span> | 
 |  |  |                 <span class="lift-waiting">等待确认</span> | 
 |  |  |                 <span class="lift-offline">离线</span> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!-- 输送线状态 --> | 
 |  |  |         <div class="line-status"> | 
 |  |  |             <div class="body-head">输送线状态</div> | 
 |  |  |             <div class="state states"> | 
 |  |  |                 <span>运输线总数</span> | 
 |  |  |                 <span class="line-ss">48</span> | 
 |  |  |                 <span class="line-ss">9</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="button"><span>所有状态</span></div> | 
 |  |  |             <div class="button item-group"> | 
 |  |  | 
 |  |  |                 <span class="site-unauto">非自动/手动</span> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!-- 条码表格 --> | 
 |  |  |         <div class="bar-code"> | 
 |  |  |             <div class="body-head" id="code">条码扫描器</div> | 
 |  |  |             <div class="tablebox"> | 
 |  |  | 
 |  |  |                     <li><span>条码名称</span><span class="right">扫码时间</span></li> | 
 |  |  |                 </div> | 
 |  |  |                 <div id="barcode2" class="table-body"> | 
 |  |  |  | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="tablebox"> | 
 |  |  |                 <div class="table-head"> | 
 |  |  |                     <li><span>条码名称</span><span class="right">扫码时间</span></li> | 
 |  |  |                 </div> | 
 |  |  |                 <div id="barcode3" class="table-body"> | 
 |  |  |  | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  |     var tData1 = [] | 
 |  |  |     var tData2 = [] | 
 |  |  |     var tData3 = [] | 
 |  |  |     var mapData = [] //地图数据 | 
 |  |  |     var currentLev = 1;//当前地图楼层 | 
 |  |  |     function getCodeData(){ | 
 |  |  |         $.ajax({ | 
 |  |  |             url:baseUrl +'/console/barcode/output/site', | 
 |  |  | 
 |  |  |                         tData1 = tData | 
 |  |  |                     } else if (tData.length<=10){ | 
 |  |  |                         tData1 = tData.slice(0,5) | 
 |  |  |                         tData.splice(0,5) | 
 |  |  |                         tData2 = tData | 
 |  |  |                         // tData.splice(0,4) | 
 |  |  |                         tData2 = tData.splice(5,10) | 
 |  |  |                     } else if(tData.length<=15){ | 
 |  |  |                         tData1 = tData.slice(0,5) | 
 |  |  |                         tData2 = tData.slice(6,10) | 
 |  |  |                         tData.splice(0,10) | 
 |  |  |                         tData3 = tData | 
 |  |  |                         tData2 = tData.slice(5,10) | 
 |  |  |                         // tData.splice(0,10) | 
 |  |  |                         tData3 = tData.slice(10,15) | 
 |  |  |                     } else { | 
 |  |  |                         tData = tData.slice(-15) | 
 |  |  |                         tData1 = tData.slice(-15) | 
 |  |  |                         tData2 = tData.slice(-10) | 
 |  |  |                         tData3 = tData.slice(-5) | 
 |  |  |                         tData1 = tData.slice(0,5) | 
 |  |  |                         tData2 = tData.slice(5,10) | 
 |  |  |                         tData3 = tData.slice(10,15) | 
 |  |  |                         // tData = tData.slice(-15) | 
 |  |  |                         // tData1 = tData.slice(-15) | 
 |  |  |                         // tData2 = tData.slice(-10) | 
 |  |  |                         // tData3 = tData.slice(-5) | 
 |  |  |  | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  | 
 |  |  |         getCodeData(); | 
 |  |  |         renderBarCode(); | 
 |  |  |     }, 1000) | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     function renderBarCode() { | 
 |  |  | 
 |  |  |             $('#barcode3').append(str3) | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     $(function (){ | 
 |  |  |         initMap(1) | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     setInterval(() => { | 
 |  |  |         getShuttleStateInfo() | 
 |  |  |         getLiftStateInfo() | 
 |  |  |     },1000) | 
 |  |  |  | 
 |  |  |     // 提升机信息表获取 | 
 |  |  |     function getLiftStateInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/lift/table/lift/state", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 $("#lift-status-box").empty() | 
 |  |  |                 res.data.forEach((item,index) => { | 
 |  |  |                     let liftStatusClass = "lift-idle" | 
 |  |  |                     switch (item.status) { | 
 |  |  |                         case 1://空闲 | 
 |  |  |                             liftStatusClass = "lift-idle"; | 
 |  |  |                             break | 
 |  |  |                         case 2://作业中 | 
 |  |  |                             liftStatusClass = "lift-working"; | 
 |  |  |                             break | 
 |  |  |                         case 3://等待确认 | 
 |  |  |                             liftStatusClass = "lift-waiting"; | 
 |  |  |                             break | 
 |  |  |                         case 4://离线 | 
 |  |  |                             liftStatusClass = "lift-offline"; | 
 |  |  |                             break | 
 |  |  |                         default: | 
 |  |  |                             liftStatusClass = "lift-idle" | 
 |  |  |                     } | 
 |  |  |                     let liftStatus = '<div class="state states">' + | 
 |  |  |                         '<span>提升机 ' + item.liftNo + '</span>' + | 
 |  |  |                         '<span class="state-ss ' + liftStatusClass + '">' + item.protocolStatus$ + '</span></div>'; | 
 |  |  |                     $("#lift-status-box").append(liftStatus) | 
 |  |  |  | 
 |  |  |                 }) | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 四向穿梭车信息表获取 | 
 |  |  |     function getShuttleStateInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/shuttle/table/shuttle/state", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 $("#shuttle-status-box").empty() | 
 |  |  |                 res.data.forEach((item,index) => { | 
 |  |  |                     let shuttleStatusClass = "shuttle-idle" | 
 |  |  |                     switch (item.status) { | 
 |  |  |                         case 1://空闲 | 
 |  |  |                             shuttleStatusClass = "shuttle-idle"; | 
 |  |  |                             break | 
 |  |  |                         case 2://作业中 | 
 |  |  |                             shuttleStatusClass = "shuttle-working"; | 
 |  |  |                             break | 
 |  |  |                         case 3://等待确认 | 
 |  |  |                             shuttleStatusClass = "shuttle-waiting"; | 
 |  |  |                             break | 
 |  |  |                         case 4://充电中 | 
 |  |  |                             shuttleStatusClass = "shuttle-charging"; | 
 |  |  |                             break | 
 |  |  |                         case 5://充电任务等待确认 | 
 |  |  |                             shuttleStatusClass = "shuttle-charging-waiting"; | 
 |  |  |                             break | 
 |  |  |                         case 6://故障修复中 | 
 |  |  |                             shuttleStatusClass = "shuttle-fixing"; | 
 |  |  |                             break | 
 |  |  |                         case 7://离线 | 
 |  |  |                             shuttleStatusClass = "shuttle-offline"; | 
 |  |  |                             break | 
 |  |  |                         default: | 
 |  |  |                             shuttleStatusClass = "shuttle-offline" | 
 |  |  |                     } | 
 |  |  |                     let shuttleStatus = '<div class="state">' + | 
 |  |  |                         '<span>四向穿梭车 ' + item.shuttleNo + '</span>' + | 
 |  |  |                         '<span class="state-ss ' + shuttleStatusClass + '">' + item.status$ + '</span></div>'; | 
 |  |  |                     $("#shuttle-status-box").append(shuttleStatus) | 
 |  |  |  | 
 |  |  |                     if(item.locNoLev != currentLev){ | 
 |  |  |                         //四向穿梭车楼层和当前地图楼层不一致,删除该车辆 | 
 |  |  |                         $("#sxcar-" + item.shuttleNo).remove() | 
 |  |  |                     }else { | 
 |  |  |                         //移动四向穿梭车 | 
 |  |  |                         moveCar(item.shuttleNo,item.locNoX,item.locNoY) | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     //计算四向穿梭车图标位置 | 
 |  |  |     function getCarPosition(x,y) { | 
 |  |  |         let top = (x * 35 - 35) + "px" //需要减去小车自己所占高度 | 
 |  |  |         let left = (y * 70 - 70) + "px" //需要减去小车自己所占宽度 | 
 |  |  |         return [top,left]; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     //移动四向穿梭车图标 | 
 |  |  |     function moveCar(id,x,y) { | 
 |  |  |         //获取具体位置top和left值 | 
 |  |  |         let position = getCarPosition(x,y) | 
 |  |  |         let top = position[0] | 
 |  |  |         let left = position[1] | 
 |  |  |         $("#sxcar-" + id).animate({top: top,left: left}, 1000); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     //初始化地图 | 
 |  |  |     function initMap(lev) { | 
 |  |  |         getMap(lev) | 
 |  |  |  | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/shuttle/table/shuttle/state", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 res.data.forEach((item,index) => { | 
 |  |  |                     if(lev == item.locNoLev){ | 
 |  |  |                         let carBox = '<div class="sxcar" id="sxcar-' + item.shuttleNo + '"></div>' | 
 |  |  |                         $("#mapDataId").append(carBox) | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     //获取地图数据 | 
 |  |  |     function getMap(lev) { | 
 |  |  |         //母轨道第一次索引,用于定位小车 | 
 |  |  |         let firstMotherIndex = [0,0]; | 
 |  |  |         $("#mapDataId").empty() | 
 |  |  |         $.ajax({ | 
 |  |  |             type:"get", | 
 |  |  |             // url: baseUrl + "/static/js/map_" + lev + ".json", | 
 |  |  |             url: baseUrl + "/console/map/" + lev + "/auth", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             success: (res) => { | 
 |  |  |                 let data = res.data | 
 |  |  |                 mapData = data | 
 |  |  |                 let content = "" | 
 |  |  |                 data.forEach((rowData,index) => { | 
 |  |  |                     //去掉上下边缘禁区 | 
 |  |  |                     if(!(index == 0 || data.length - 1 == index)){ | 
 |  |  |                         let row = '<div class="stock-group">'; | 
 |  |  |                         rowData.forEach((colData,idx) => { | 
 |  |  |                             //去掉左右边缘禁区 | 
 |  |  |                             if(!(idx == 0 || rowData.length - 1 == idx)){ | 
 |  |  |                                 let col; | 
 |  |  |                                 switch (colData.value){ | 
 |  |  |                                     case -999: | 
 |  |  |                                         col = '<button class="item" style="background:#f83333;color: #fff;">' + idx + '</button>'; | 
 |  |  |                                         break; | 
 |  |  |                                     case -1: | 
 |  |  |                                         col = '<button class="item" style="visibility: hidden">' + idx + '</button>'; | 
 |  |  |                                         break; | 
 |  |  |                                     case 3: | 
 |  |  |                                         //母轨道 | 
 |  |  |                                         col = '<button class="item" style="background: #5af;">⇅⇄</button>'; | 
 |  |  |                                         if (firstMotherIndex[0] === 0 && firstMotherIndex[1] === 0) { | 
 |  |  |                                             //第一次遇到母轨道,则保存该轨道地址(用于小车初始化定位) | 
 |  |  |                                             firstMotherIndex = [index,idx] | 
 |  |  |                                         } | 
 |  |  |                                         break; | 
 |  |  |                                     case 4: | 
 |  |  |                                         //站点 | 
 |  |  |                                         var data = colData.data; | 
 |  |  |                                         col = '<div id="site-' + data + '" class="site">' + data + '(9991)</div>'; | 
 |  |  |                                         break; | 
 |  |  |                                     case 5: | 
 |  |  |                                         //充电桩 | 
 |  |  |                                         col = '<button class="item" style="font-size: 24px">⚡</button>'; | 
 |  |  |                                         break; | 
 |  |  |                                     default: | 
 |  |  |                                         col = '<button class="item">' + idx + '</button>'; | 
 |  |  |                                 } | 
 |  |  |  | 
 |  |  |                                 if(rowData.length - 2 == idx){ | 
 |  |  |                                     //打上行数标记 | 
 |  |  |                                     col += '<span class="row-no">' + index + '#</span>'; | 
 |  |  |                                 } | 
 |  |  |                                 row += col | 
 |  |  |                             } | 
 |  |  |                         }) | 
 |  |  |                         row += '</div>'; | 
 |  |  |                         content += row | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |  | 
 |  |  |                 $("#mapDataId").append(content) | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     //将地图数据转换成int二维数组(后续用于请求计算路径时携带地图数据参数使用) | 
 |  |  |     function getMap2TwoArr() { | 
 |  |  |         let data = [] | 
 |  |  |         mapData.forEach((item,index) => { | 
 |  |  |             let data2 = [] | 
 |  |  |             item.forEach((val,idx) => { | 
 |  |  |                 data2.push(val.value) | 
 |  |  |             }) | 
 |  |  |             data.push(data2) | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         return data; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     function testMove() { | 
 |  |  |         getMap2TwoArr()//测试地图数据转换是否正常 | 
 |  |  |         let json = "[{\n" + | 
 |  |  |             "\t\t\"x\": 5,\n" + | 
 |  |  |             "\t\t\"y\": 5\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 6,\n" + | 
 |  |  |             "\t\t\"y\": 5\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 7,\n" + | 
 |  |  |             "\t\t\"y\": 5\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 8,\n" + | 
 |  |  |             "\t\t\"y\": 5\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 9,\n" + | 
 |  |  |             "\t\t\"y\": 5\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 10,\n" + | 
 |  |  |             "\t\t\"y\": 5\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 11,\n" + | 
 |  |  |             "\t\t\"y\": 5\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 11,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 12,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 13,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 14,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 15,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 16,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 17,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 18,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 19,\n" + | 
 |  |  |             "\t\t\"y\": 6\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 19,\n" + | 
 |  |  |             "\t\t\"y\": 7\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 19,\n" + | 
 |  |  |             "\t\t\"y\": 8\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 20,\n" + | 
 |  |  |             "\t\t\"y\": 8\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 21,\n" + | 
 |  |  |             "\t\t\"y\": 8\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 22,\n" + | 
 |  |  |             "\t\t\"y\": 8\n" + | 
 |  |  |             "\t},\n" + | 
 |  |  |             "\t{\n" + | 
 |  |  |             "\t\t\"x\": 23,\n" + | 
 |  |  |             "\t\t\"y\": 8\n" + | 
 |  |  |             "\t}\n" + | 
 |  |  |             "]"; | 
 |  |  |         json = JSON.parse(json) | 
 |  |  |         json.forEach((item,index) => { | 
 |  |  |             moveCar(1, item.x, item.y); | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 重置地图 | 
 |  |  |      */ | 
 |  |  |     function resetMap() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url:baseUrl+"/console/map/resetMap/auth", | 
 |  |  |             headers:{ | 
 |  |  |                 'token': localStorage.getItem('token') | 
 |  |  |             }, | 
 |  |  |             data:{}, | 
 |  |  |             method:'get', | 
 |  |  |             success:function (res) { | 
 |  |  |                 layer.msg('重置完成'); | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 小车偏移动画 | 
 |  |  |     function carAnimate(id, target) { | 
 |  |  |         if (id === 1000) { | 
 |  |  |             let targetTop = 130; | 
 |  |  |             switch (target) { | 
 |  |  |                 case 110: | 
 |  |  |                     targetTop += 0; | 
 |  |  |                     break; | 
 |  |  |                 case 109: | 
 |  |  |                     targetTop += 60; | 
 |  |  |                     break; | 
 |  |  |                 case 108: | 
 |  |  |                     targetTop += 100; | 
 |  |  |                     break; | 
 |  |  |                 case 107: | 
 |  |  |                     targetTop += 180; | 
 |  |  |                     break; | 
 |  |  |                 case 106: | 
 |  |  |                     targetTop += 220; | 
 |  |  |                     break; | 
 |  |  |                 default: | 
 |  |  |                     return; | 
 |  |  |             } | 
 |  |  |             $("#site-" + id).animate({top: targetTop+'px'}, 1000); | 
 |  |  |         } else if (id === 2000) { | 
 |  |  |             let targetTop = 130; | 
 |  |  |             switch (target) { | 
 |  |  |                 case 226: | 
 |  |  |                     targetTop += 0; | 
 |  |  |                     break; | 
 |  |  |                 case 225: | 
 |  |  |                     targetTop += 60; | 
 |  |  |                     break; | 
 |  |  |                 case 224: | 
 |  |  |                     targetTop += 100; | 
 |  |  |                     break; | 
 |  |  |                 case 223: | 
 |  |  |                     targetTop += 180; | 
 |  |  |                     break; | 
 |  |  |                 case 222: | 
 |  |  |                     targetTop += 220; | 
 |  |  |                     break; | 
 |  |  |                 case 214: | 
 |  |  |                     targetTop += 280; | 
 |  |  |                     break; | 
 |  |  |                 case 220: | 
 |  |  |                     targetTop += 320; | 
 |  |  |                     break; | 
 |  |  |                 default: | 
 |  |  |                     return; | 
 |  |  |             } | 
 |  |  |             $("#site-" + id).animate({top: targetTop+'px'}, 1000); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  | <script type="text/javascript"> | 
 |  |  |     // 弹窗站点信息 | 
 |  |  |     $('.site').on('click',function(){ | 
 |  |  |     $('#mapDataId').on('click','.site',function(){ | 
 |  |  |         var id = this.id.split("-")[1]; | 
 |  |  |         $("#siteWindow").attr("style","display:block;");//显示div | 
 |  |  |         $("#crnWindow").attr("style","display:none;"); | 
 |  |  | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     var crn1Position = 0; | 
 |  |  |     var crn2Position = 0; | 
 |  |  |     var crn3Position = 0; | 
 |  |  | 
 |  |  |     setInterval(function () { | 
 |  |  |         getSitesInfo(); | 
 |  |  |     }, 3000); | 
 |  |  |  | 
 |  |  |     $("#system-toggle").on("click",(e) => { | 
 |  |  |         systemSwitch() | 
 |  |  |         e.stopPropagation();//表示阻止向父元素冒泡 | 
 |  |  |         e.preventDefault();//阻止 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交或者a标签)。 | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     // 系统运行开关 | 
 |  |  |     function systemSwitch() { | 
 |  |  | 
 |  |  |                 layer.close(index); | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                     if (res.data.status) { | 
 |  |  |                         $('#system-icon').attr("class", "system-icon-open"); | 
 |  |  |                         $('#system-toggle-checked').attr("checked", true); | 
 |  |  |                         $('#system-run-desc').html("系统运行中..."); | 
 |  |  |                         parent.systemRunning = true; | 
 |  |  |                     } else { | 
 |  |  |                         $('#system-icon').attr("class", "system-icon-close"); | 
 |  |  |                         $('#system-toggle-checked').attr("checked", false); | 
 |  |  |                         $('#system-run-desc').html("系统已停止!"); | 
 |  |  |                         parent.systemRunning = false; | 
 |  |  |                     } | 
 |  |  | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                     if (res.data.status) { | 
 |  |  |                         $('#system-icon').attr("class", "system-icon-open"); | 
 |  |  |                         $('#system-toggle-checked').attr("checked", true); | 
 |  |  |                         $('#system-run-desc').html("系统运行中..."); | 
 |  |  |                         parent.systemRunning = true; | 
 |  |  |                     } else { | 
 |  |  |                         $('#system-icon').attr("class", "system-icon-close"); | 
 |  |  |                         $('#system-toggle-checked').attr("checked", false); | 
 |  |  |                         $('#system-run-desc').html("系统已停止!"); | 
 |  |  |                         parent.systemRunning = false; | 
 |  |  |                     } | 
 |  |  | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 堆垛机偏移动画 | 
 |  |  |     function crnAnimate(id, leftVal) { | 
 |  |  |         switch (id) { | 
 |  |  |             case 1: | 
 |  |  |                 $("#crn-1").animate({left: leftVal+'px'}, 1000); | 
 |  |  |                 crn1Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 2: | 
 |  |  |                 $("#crn-2").animate({left: leftVal+'px'}, 1000); | 
 |  |  |                 crn2Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 3: | 
 |  |  |                 $("#crn-3").animate({left: leftVal+'px'}, 1000); | 
 |  |  |                 crn3Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 4: | 
 |  |  |                 $("#crn-4").animate({left: leftVal+'px'}, 1000); | 
 |  |  |                 crn4Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             case 5: | 
 |  |  |                 $("#crn-5").animate({left: leftVal+'px'}, 1000); | 
 |  |  |                 crn5Position = leftVal; | 
 |  |  |                 break; | 
 |  |  |             default: | 
 |  |  |                 break | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 页面点击事件监听 --------------------------------------------------------- | 
 |  |  |  | 
 |  |  |     // 输送设备点击事件 | 
 |  |  |     // $('.site').on('click', function () { | 
 |  |  |     //    var id = this.id.split("-")[1]; | 
 |  |  |     //    if (id === undefined) { | 
 |  |  |     //       return; | 
 |  |  |     //    } | 
 |  |  |     //    layer.open({ | 
 |  |  |     //       title: id + " 站点信息详情", | 
 |  |  |     //       closeBtn: 0, | 
 |  |  |     //       skin: 'layui-layer-lan', | 
 |  |  |     //       offset: '180px', | 
 |  |  |     //       type: 1, | 
 |  |  |     //       shadeClose: true, | 
 |  |  |     //       content: $('#siteWindow'), | 
 |  |  |     //       area: ['35rem', '18rem'], | 
 |  |  |     //       btn: ['确定', '关闭'], | 
 |  |  |     //       success: function(layero, index){ | 
 |  |  |     //          http.post(baseUrl+"/console/site/detail", {siteId: id}, function (res) { | 
 |  |  |     //             for (var val in res.data) { | 
 |  |  |     //                var find = $("#siteWindow").find(":input[name='" + val + "']"); | 
 |  |  |     //                if (find[0].type==='text') { | 
 |  |  |     //                   find.val(res.data[val]); | 
 |  |  |     //                } else if (find[0].type === 'checkbox') { | 
 |  |  |     //                   find.attr("checked", res.data[val] === 'Y'); | 
 |  |  |     //                } | 
 |  |  |     //             } | 
 |  |  |     //          }) | 
 |  |  |     //       }, | 
 |  |  |     //       end: function () { | 
 |  |  |     //          $(':input', $("#siteWindow")).val('').removeAttr('checked').removeAttr('selected'); | 
 |  |  |     //       } | 
 |  |  |     //    }); | 
 |  |  |     // }); | 
 |  |  |  | 
 |  |  |     // 堆垛机点击事件 | 
 |  |  |     // $('.machine').on('click', function () { | 
 |  |  |     //    var id = this.id.split("-")[1]; | 
 |  |  |     //    layer.open({ | 
 |  |  |     //       title: id+"号堆垛机", | 
 |  |  |     //       skin: 'layui-layer-lan', | 
 |  |  |     //       closeBtn: 0, | 
 |  |  |     //       type: 1, | 
 |  |  |     //       offset: '150px', | 
 |  |  |     //       shadeClose: true, | 
 |  |  |     //       content: $("#crnWindow"), | 
 |  |  |     //       area: ['40rem', '20rem'], | 
 |  |  |     //       btn: ['确定', '关闭'], | 
 |  |  |     //       success: function(layero, index){ | 
 |  |  |     //          http.post(baseUrl+"/console/crn/detail", {crnNo: id}, function (res) { | 
 |  |  |     //             for (var val in res.data) { | 
 |  |  |     //                var find = $("#crnWindow").find(":input[name='" + val + "']"); | 
 |  |  |     //                if (find[0].type==='text') { | 
 |  |  |     //                   find.val(res.data[val]); | 
 |  |  |     //                } else if (find[0].type === 'checkbox') { | 
 |  |  |     //                   find.attr("checked", res.data[val] === 'Y'); | 
 |  |  |     //                } | 
 |  |  |     //             } | 
 |  |  |     //          }) | 
 |  |  |     //       }, | 
 |  |  |     //       end: function () { | 
 |  |  |     //          $(':input', $("#crnWindow")).val('').removeAttr('checked').removeAttr('selected'); | 
 |  |  |     //       } | 
 |  |  |     //    }); | 
 |  |  |     // }); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     // 小车偏移动画 | 
 |  |  |     function carAnimate(id, target) { | 
 |  |  |         var targetTop = 122; | 
 |  |  | 
 |  |  |         $("#site-" + id).animate({top: targetTop+'px'}, 1000); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |      //楼层切换按钮 | 
 |  |  |     function changFloor(e,x) { | 
 |  |  |         $("#floorBtnBox button").each((index,item) => { | 
 |  |  |             $(item).removeClass("btn-16-active") | 
 |  |  |         }) | 
 |  |  |         $(e).addClass("btn-16-active") | 
 |  |  |         currentLev = x | 
 |  |  |         initMap(currentLev) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  | </script> |