| <!DOCTYPE html> | 
| <html> | 
| <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"> | 
|   | 
|   | 
|     <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> | 
|   | 
| </head> | 
| <body> | 
| <div id="root"> | 
|     <div class="head"> | 
|         <div class="head-left"> | 
|             <h1>自动仓库WCS监控图</h1> | 
|             <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> | 
|         </div> | 
|         <div class="head-right"> | 
|             <img src="../static/images/zy-logo.png" alt="中扬" height="44" width="80" > | 
|         </div> | 
|     </div> | 
|     <!--第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> | 
|         <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> | 
|     <!-- 第4列(宽度 70px 140px) --> | 
|   | 
|     <!--<!– 第4列(宽度 70px) –>--> | 
|     <div class="site-row site-row-4"> | 
|         <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> | 
|     <!--<!– 第5列(宽度 70px) –>--> | 
|     <div class="site-row site-row-5"> | 
|         <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> | 
|     <!--<!– 第6列(宽度 70px) –>--> | 
|     <div class="site-row site-row-6"> | 
|         <div id="site-183" class="site">183</div> | 
|         <div id="site-184" class="site" style="margin-top: 21px">184</div> | 
|         <div id="site-185" class="site" style="margin-top: 73px">185</div> | 
|         <div id="site-186" class="site" style="margin-top: 21px">186</div> | 
|         <div id="site-187" class="site" style="margin-top: 73px">187</div> | 
|         <div id="site-188" class="site" style="margin-top: 21px">188</div> | 
|         <div id="site-189" class="site" style="margin-top: 73px">189</div> | 
|         <div id="site-190" class="site" style="margin-top: 21px">190</div> | 
|         <div id="site-191" class="site" style="margin-top: 73px">191</div> | 
|         <div id="site-192" class="site" style="margin-top: 21px">192</div> | 
|     </div> | 
|   | 
|     <!-- 货架 + 堆垛机 + 入库站点 --> | 
|     <div class="main-part"> | 
|         <!-- 第一组 --> | 
|         <div class="lane"> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">1#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <div id="site-100" class="site" style="">100</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</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"> | 
|                 <div id="site-101" class="site" style="">101</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">3#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">4#</span> | 
|             </div> | 
|         </div> | 
|         <!-- 第二组 --> | 
|         <div class="lane"> | 
|             <span class="row-no"></span> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <div class="site" style="background-color: rgb(108,167,168)"></div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">5#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <div id="site-102" class="site" style="">102</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">6#</span> | 
|             </div> | 
|             <!-- 堆垛机 --> | 
|             <div class="crn"> | 
|                 <hr class="pathway"> | 
|                 <div id="crn-2" class="machine"></div> | 
|             </div> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <div id="site-103" class="site" style="">103</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">7#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <div class="site" style="background-color: rgb(108,167,168)"></div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">8#</span> | 
|             </div> | 
|         </div> | 
|         <!--第三组--> | 
|         <div class="lane"> | 
|             <span class="row-no"></span> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">9#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <div id="site-104" class="site" style="">104</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">10#</span> | 
|             </div> | 
|             <!-- 堆垛机 --> | 
|             <div class="crn"> | 
|                 <hr class="pathway"> | 
|                 <div id="crn-3" class="machine"></div> | 
|             </div> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <div id="site-105" class="site" style="">105</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">11#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">12#</span> | 
|             </div> | 
|         </div> | 
|         <!--第四组--> | 
|         <div class="lane"> | 
|             <span class="row-no"></span> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">13#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <div id="site-106" class="site" style="">106</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">14#</span> | 
|             </div> | 
|             <!-- 堆垛机 --> | 
|             <div class="crn"> | 
|                 <hr class="pathway"> | 
|                 <div id="crn-4" class="machine"></div> | 
|             </div> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <div id="site-107" class="site" style="">107</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">15#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">16#</span> | 
|             </div> | 
|         </div> | 
|         <!--第五组--> | 
|         <div class="lane"> | 
|             <span class="row-no"></span> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">17#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <div id="site-108" class="site" style="">108</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">18#</span> | 
|             </div> | 
|             <!-- 堆垛机 --> | 
|             <div class="crn"> | 
|                 <hr class="pathway"> | 
|                 <div id="crn-5" class="machine"></div> | 
|             </div> | 
|             <!-- 货架 --> | 
|             <div class="stock-group"> | 
|                 <div id="site-109" class="site" style="">109</div> | 
|                 <button class="item"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">19#</span> | 
|             </div> | 
|             <div class="stock-group"> | 
|                 <button class="item" style="margin-left: 82px"> 2 </button> | 
|                 <button class="item"> 4 </button> | 
|                 <button class="item"> 6 </button> | 
|                 <button class="item"> 8 </button> | 
|                 <button class="item">10</button> | 
|                 <button class="item">12</button> | 
|                 <button class="item">14</button> | 
|                 <button class="item">16</button> | 
|                 <button class="item">18</button> | 
|                 <button class="item">20</button> | 
|                 <button class="item">22</button> | 
|                 <button class="item">24</button> | 
|                 <button class="item">26</button> | 
|                 <button class="item">28</button> | 
|                 <button class="item">30</button> | 
|                 <button class="item">32</button> | 
|                 <button class="item">34</button> | 
|                 <button class="item">36</button> | 
|                 <button class="item">38</button> | 
|                 <button class="item">40</button> | 
|                 <button class="item">42</button> | 
|                 <button class="item">44</button> | 
|                 <button class="item">46</button> | 
|                 <button class="item">48</button> | 
|                 <button class="item">50</button> | 
|                 <button class="item">52</button> | 
|                 <button class="item">54</button> | 
|                 <button class="item">56</button> | 
|                 <button class="item">58</button> | 
|                 <button class="item">60</button> | 
|                 <button class="item">62</button> | 
|                 <button class="item">64</button> | 
|                 <button class="item">66</button> | 
|                 <button class="item">68</button> | 
|                 <button class="item">70</button> | 
|                 <span class="row-no">20#</span> | 
|             </div> | 
|         </div> | 
|     </div> | 
|     <!--底部--> | 
|     <div id="body"> | 
|         <!-- 总开关 --> | 
|         <div class="system-state"> | 
|             <div class="body-head">总开关</div> | 
|             <div class="switch"> | 
|                 <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div> | 
|                 <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> | 
|             <div class="state"> | 
|                 <span>堆垛机 2</span> | 
|                 <span class="state-ss machine-auto-flag    ">自动</span> | 
|   | 
|             </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> | 
|             </div> | 
|         </div> | 
|         <div class="line-status"> | 
|             <div class="body-head">输送线状态</div> | 
|             <div class="state states"> | 
|                 <span>运输线总数</span> | 
|                 <span class="line-ss">58</span> | 
|             </div> | 
|             <div class="button"><span>所有状态</span></div> | 
|             <div class="button item-group"> | 
|                 <span class="site-auto-run-id">自动+有物+ID</span> | 
|                 <span class="site-auto-run">自动+有物</span> | 
|                 <span class="site-auto-id">自动+ID</span> | 
|                 <span class="site-auto">自动</span> | 
|                 <span class="site-unauto">非自动/手动</span> | 
|             </div> | 
|         </div> | 
|         <div class="bar-code"> | 
|             <div class="body-head" id="code">条码扫描器</div> | 
|             <div class="tablebox"> | 
|                 <div class="table-head"> | 
|                     <li><span>条码名称</span><span class="right">扫码时间</span></li> | 
|                 </div> | 
|                 <div id="barcode1" class="table-body"> | 
|   | 
|                 </div> | 
|             </div> | 
|             <div class="tablebox"> | 
|                 <div class="table-head"> | 
|                     <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> | 
|         </div> | 
|     </div> | 
|     <!-- 堆垛机弹窗 --> | 
|     <div id="crnWindow" style="display: none;" class="animate__animated animate__fadeIn"> | 
|         <div id="crnWindow-head"> | 
|             <div class='detailed'></div> | 
|             <button></button> | 
|         </div> | 
|         <form> | 
|             <!-- 堆垛机号 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label" style> | 
|                     <span>堆垛机号:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="crnNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 工作号 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>工作号:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="workNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 站源 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>站源:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="sourceStaNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 目标站 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>目标站:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="staNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 工作状态 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>工作状态:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="wrkSts" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 出入类型 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>出入类型:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="ioType" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 源库位 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>源库位:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="sourceLocNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 目标库位 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>目标库位:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="locNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 堆垛机状态 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>堆垛机状态:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="crnStatus" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 异常 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>异常:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="error" value=""> | 
|                 </div> | 
|             </div> | 
|         </form> | 
|     </div> | 
|     <!-- 输送设备弹窗 --> | 
|     <div id="siteWindow" style="display: none;" class="animate__animated animate__fadeIn"> | 
|         <!-- 表头 --> | 
|         <div id="siteWindow-head"> | 
|             <div class='detailed'></div> | 
|             <button></button> | 
|         </div> | 
|         <form> | 
|             <!-- 设备号 --> | 
|             <div class="form-item"  > | 
|                 <div class="form-item-label"> | 
|                     <span>设备号:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="siteId" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 工作号 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>工作号:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="workNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 工作状态 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>工作状态:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="wrkSts" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 自动 --> | 
|             <div class="form-item-checkbox"> | 
|                 <div class="form-item-label-checkbox"> | 
|                     <span>自动</span> | 
|                 </div> | 
|                 <div class="form-item-input-checkbox"> | 
|                     <input type="checkbox" name="autoing"> | 
|                 </div> | 
|             </div> | 
|             <!-- 有物 --> | 
|             <div class="form-item-checkbox"> | 
|                 <div class="form-item-label-checkbox"> | 
|                     <span>有物</span> | 
|                 </div> | 
|                 <div class="form-item-input-checkbox"> | 
|                     <input type="checkbox" name="loading"> | 
|                 </div> | 
|             </div> | 
|             <!-- 能入 --> | 
|             <div class="form-item-checkbox"> | 
|                 <div class="form-item-label-checkbox"> | 
|                     <span>能入</span> | 
|                 </div> | 
|                 <div class="form-item-input-checkbox"> | 
|                     <input type="checkbox" name="canining"> | 
|                 </div> | 
|             </div> | 
|             <!-- 能出 --> | 
|             <div class="form-item-checkbox"> | 
|                 <div class="form-item-label-checkbox"> | 
|                     <span>能出</span> | 
|                 </div> | 
|                 <div class="form-item-input-checkbox"> | 
|                     <input type="checkbox" name="canouting"> | 
|                 </div> | 
|             </div> | 
|             <!-- 出入类型 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>出入类型:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="ioType" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 源站 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>源站:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="sourceStaNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 目标站 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>目标站:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="staNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 源库位 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>源库位:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="sourceLocNo" value=""> | 
|                 </div> | 
|             </div> | 
|             <!-- 目标库位 --> | 
|             <div class="form-item"> | 
|                 <div class="form-item-label"> | 
|                     <span>目标库位:</span> | 
|                 </div> | 
|                 <div class="form-item-input"> | 
|                     <input type="text" name="locNo" value=""> | 
|                 </div> | 
|             </div> | 
|   | 
|         </form> | 
|     </div> | 
|   | 
| </div> | 
|   | 
|   | 
| </body> | 
| </html> | 
| <script> | 
|     var tData = [] | 
|     var tData1 = [] | 
|     var tData2 = [] | 
|     var tData3 = [] | 
|     function getCodeData(){ | 
|         $.ajax({ | 
|             url:baseUrl +'/console/barcode/output/site', | 
|             method:'GET', | 
|             success:function (res) { | 
|                 if(res.code === 200){ | 
|                     tData = eval(res.data); | 
|                     if(tData.length<=5){ | 
|                         tData1 = tData | 
|                     } else if (tData.length<=10){ | 
|                         tData1 = tData.slice(0,5) | 
|                         tData.splice(0,5) | 
|                         tData2 = tData | 
|                     } else if(tData.length<=15){ | 
|                         tData1 = tData.slice(0,5) | 
|                         tData2 = tData.slice(6,10) | 
|                         tData.splice(0,10) | 
|                         tData3 = tData | 
|                     } else { | 
|                         tData = tData.slice(-15) | 
|                         tData1 = tData.slice(-15) | 
|                         tData2 = tData.slice(-10) | 
|                         tData3 = tData.slice(-5) | 
|   | 
|                     } | 
|                 } | 
|             } | 
|         }) | 
|     } | 
|     setInterval(function () { | 
|         getCodeData(); | 
|         renderBarCode(); | 
|     }, 1000) | 
|   | 
|   | 
|   | 
|   | 
|     function renderBarCode() { | 
|         for (var i = 0;i<tData1.length;i++){ | 
|             var str1 = '<li><span>' + tData1[i].barcode + '</span><span class="right">' + tData1[i].time + '</span></li>' | 
|             $('#barcode1').append(str1) | 
|         } | 
|         for(var j = 0;j<tData2.length;j++){ | 
|             var str2 = '<li><span>' + tData2[j].barcode + '</span><span class="right">' + tData2[j].time + '</span></li>' | 
|             $('#barcode2').append(str2) | 
|         } | 
|         for(var k = 0;k<tData3.length;k++){ | 
|             var str3 = '<li><span>' + tData3[k].barcode + '</span><span class="right">' + tData3[k].time + '</span></li>' | 
|             $('#barcode3').append(str3) | 
|         } | 
|     } | 
| </script> | 
| <script type="text/javascript"> | 
|     // 弹窗站点信息 | 
|     $('.site').on('click',function(){ | 
|         var id = this.id.split("-")[1]; | 
|         $("#siteWindow").attr("style","display:block;");//显示div | 
|         $("#crnWindow").attr("style","display:none;"); | 
|         $(".detailed").empty(); | 
|         $('.detailed').append(id+'站点详细信息'); | 
|         $.ajax({ | 
|             url:baseUrl+"/console/site/detail", | 
|             headers:{ | 
|                 'token': localStorage.getItem('token') | 
|             }, | 
|             data:{ | 
|                 siteId: id | 
|             }, | 
|             method:'post', | 
|             success: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'); | 
|                     } | 
|                 } | 
|             } | 
|   | 
|         }) | 
|   | 
|     }); | 
|     // 堆垛机信息 | 
|     $('.machine').on('click',function(){ | 
|         var id = this.id.split("-")[1]; | 
|         $("#crnWindow").attr('style','display:block;'); | 
|         $("#siteWindow").attr("style","display:none;"); | 
|         $('.detailed').empty(); | 
|         $('.detailed').append(id+'号堆垛机'); | 
|         $.ajax({ | 
|             url:baseUrl+"/console/crn/detail", | 
|             headers:{ | 
|                 'token': localStorage.getItem('token') | 
|             }, | 
|             data:{ | 
|                 crnNo: id | 
|             }, | 
|             method:'post', | 
|             success: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'); | 
|                     } | 
|                 } | 
|             } | 
|   | 
|         }) | 
|   | 
|     }) | 
|     // 弹窗关闭 | 
|     $('button').on('click',function(){ | 
|         $('#siteWindow').attr('style','display:none') | 
|         $('#crnWindow').attr('style','display:none') | 
|     }) | 
|   | 
|   | 
|   | 
|     var crn1Position = 0; | 
|     var crn2Position = 0; | 
|     var crn3Position = 0; | 
|     var crn4Position = 0; | 
|     var crn5Position = 0; | 
|   | 
|     // 初始化 | 
|     getSitesInfo(); | 
|     getCrnInfo(); | 
|     getSystemRunningStatus(); | 
|     getBarcodeInfo(); | 
|     getScaleInfo(); | 
|     // 实时访问 | 
|     setInterval(function () { | 
|         getCrnInfo(); | 
|         getSystemRunningStatus(); | 
|         getBarcodeInfo(); | 
|         getScaleInfo(); | 
|     }, 1000); | 
|     setInterval(function () { | 
|         getSitesInfo(); | 
|     }, 3000); | 
|   | 
|     // 系统运行开关 | 
|     function systemSwitch() { | 
|         if (parent.systemRunning){ | 
|             layer.prompt({title: '请输入口令,并停止 WCS 系统', formType: 1,   shadeClose: true}, function(pass, idx){ | 
|                 layer.close(idx); | 
|                 doSwitch(0, pass); // 停止wcs系统 | 
|             }); | 
|         } else { | 
|             doSwitch(1); // 启动wcs系统 | 
|         } | 
|     } | 
|   | 
|     // 请求服务器控制wcs系统运行状态 | 
|     function doSwitch(operatorType, password) { | 
|         // 加载tips | 
|         var index = layer.load(1, { | 
|             shade: [0.1,'#fff'] | 
|         }); | 
|         $.ajax({ | 
|             url: baseUrl+ "/console/system/switch", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             // async: false, | 
|             data: { | 
|                 operatorType: operatorType, | 
|                 password: password | 
|             }, | 
|             method: 'POST', | 
|             success: function (res) { | 
|                 layer.close(index); | 
|                 if (res.code === 200){ | 
|                     if (res.data.status) { | 
|                         $('#system-icon').attr("class", "system-icon-open"); | 
|                         $('#system-run-desc').html("系统运行中..."); | 
|                         parent.systemRunning = true; | 
|                     } else { | 
|                         $('#system-icon').attr("class", "system-icon-close"); | 
|                         $('#system-run-desc').html("系统已停止!"); | 
|                         parent.systemRunning = false; | 
|                     } | 
|                 } else if (res.code === 403){ | 
|                     parent.location.href = baseUrl+"/login"; | 
|                 }  else { | 
|                     console.log(res.msg); | 
|   | 
|                 } | 
|             } | 
|         }); | 
|   | 
|     } | 
|   | 
|     // 获取wcs系统运行状态 | 
|     function getSystemRunningStatus() { | 
|         $.ajax({ | 
|             url: baseUrl+ "/console/system/running/status", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             method: 'POST', | 
|             success: function (res) { | 
|                 if (res.code === 200){ | 
|                     if (res.data.status) { | 
|                         $('#system-icon').attr("class", "system-icon-open"); | 
|                         $('#system-run-desc').html("系统运行中..."); | 
|                         parent.systemRunning = true; | 
|                     } else { | 
|                         $('#system-icon').attr("class", "system-icon-close"); | 
|                         $('#system-run-desc').html("系统已停止!"); | 
|                         parent.systemRunning = false; | 
|                     } | 
|                 } else if (res.code === 403){ | 
|                     parent.location.href = baseUrl+"/login"; | 
|                 }  else { | 
|                     console.log(res.msg); | 
|                 } | 
|             } | 
|         }); | 
|     } | 
|   | 
|     // 输送设备实时数据获取 | 
|     function getSitesInfo(){ | 
|         $.ajax({ | 
|             url: baseUrl+ "/console/latest/data/site", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             method: 'POST', | 
|             success: function (res) { | 
|                 if (res.code === 200){ | 
|                     var sites = res.data; | 
|                     for (var i = 0; i < sites.length; i++){ | 
|                         var siteEl = $("#site-"+sites[i].siteId); | 
|                         siteEl.attr("class", "site " + sites[i].siteStatus); | 
|                         if (sites[i].workNo != null && sites[i].workNo>0) { | 
|                             siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]"); | 
|                         } else { | 
|                             siteEl.html(sites[i].siteId); | 
|                         } | 
|                         if (i+1===8) { | 
|                             carAnimate(i+1, Number(sites[i].nearbySta)); | 
|                         } | 
|                     } | 
|                 } else if (res.code === 403){ | 
|                     parent.location.href = baseUrl+"/login"; | 
|                 }  else { | 
|                     console.log(res.msg); | 
|                 } | 
|             } | 
|         }); | 
|     } | 
|   | 
|     // 堆垛机实时数据获取 | 
|     function getCrnInfo(){ | 
|         $.ajax({ | 
|             url: baseUrl+ "/console/latest/data/crn", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             method: 'POST', | 
|             success: function (res) { | 
|                 if (res.code === 200){ | 
|                     var crns = res.data; | 
|                     for (var i = 0; i < crns.length; i++){ | 
|                         var crnEl = $("#crn-"+crns[i].crnId); | 
|                         crnEl.attr("class", "machine " + crns[i].crnStatus); | 
|                         var unit = ($('.item').eq(0).width()+13)/2; | 
|                         if (crns[i].bay < 0) { | 
|                             crns[i].bay = 0 | 
|                         } | 
|                         crnEl.animate({left: (crns[i].bay * unit) +'px'}, 1000); | 
|                     } | 
|                 } else if (res.code === 403){ | 
|                     parent.location.href = baseUrl+"/login"; | 
|                 }  else { | 
|                     console.log(res.msg); | 
|                 } | 
|             } | 
|         }); | 
|     } | 
|     // 扫码器实时数据获取 | 
|     function getBarcodeInfo(){ | 
|         $.ajax({ | 
|             url: baseUrl+ "/console/latest/data/barcode", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             method: 'POST', | 
|             success: function (res) { | 
|                 if (res.code === 200){ | 
|                     var barcodes = res.data; | 
|                     for (var i = 0; i < barcodes.length; i++){ | 
|                         $("#code-decoder-data-"+barcodes[i].barcodeId).html(barcodes[i].codeValue); | 
|                     } | 
|                 } else if (res.code === 403){ | 
|                     parent.location.href = baseUrl+"/login"; | 
|                 }  else { | 
|                     console.log(res.msg); | 
|                 } | 
|             } | 
|         }); | 
|     } | 
|   | 
|     // 磅秤实时数据获取 | 
|     function getScaleInfo(){ | 
|         $.ajax({ | 
|             url: baseUrl+ "/console/latest/data/scale", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             method: 'POST', | 
|             success: function (res) { | 
|   | 
|                 if (res.code === 200){ | 
|                     var sclaes = res.data; | 
|                     for (var i = 0; i < sclaes.length; i++){ | 
|                         console.log(sclaes[i].scaleId + ":" + sclaes[i].value) | 
|                         $("#scale-data-"+sclaes[i].scaleId).text(sclaes[i].value); | 
|                     } | 
|                 } else if (res.code === 403){ | 
|                     parent.location.href = baseUrl+"/login"; | 
|                 }  else { | 
|                     console.log(res.msg); | 
|                 } | 
|             } | 
|         }); | 
|     } | 
|   | 
|     // 堆垛机偏移动画 | 
|     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; | 
|         if (id === 8) { | 
|             switch (target) { | 
|                 case 1: | 
|                     targetTop += 160; | 
|                     break; | 
|                 case 2: | 
|                     targetTop += 140; | 
|                     break; | 
|                 case 3: | 
|                     targetTop += 80; | 
|                     break; | 
|                 case 4: | 
|                     targetTop += 40; | 
|                     break; | 
|                 case 7: | 
|                     targetTop += 0; | 
|                     break; | 
|                 default: | 
|                     return; | 
|             } | 
|         } else { | 
|             return; | 
|         } | 
|         $("#site-" + id).animate({top: targetTop+'px'}, 1000); | 
|     } | 
|   | 
|   | 
|   | 
| </script> |