From c350b737713fe518c22036dfc9a2574bcafcb15c Mon Sep 17 00:00:00 2001 From: vincent <1341870251@qq.com> Date: 星期二, 02 六月 2020 15:18:08 +0800 Subject: [PATCH] # --- src/main/webapp/views/console.html | 751 +++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 489 insertions(+), 262 deletions(-) diff --git a/src/main/webapp/views/console.html b/src/main/webapp/views/console.html index 094f543..47fc13a 100644 --- a/src/main/webapp/views/console.html +++ b/src/main/webapp/views/console.html @@ -1,285 +1,512 @@ <!DOCTYPE html> <html lang="en"> +<!--5灞� 28鍒� 1120搴撲綅--> <head> <meta charset="UTF-8"> - <title>Title</title> + <title>WCS鎺у埗涓績</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"> <link rel="stylesheet" type="text/css" href="../static/css/common.css"> <link rel="stylesheet" type="text/css" href="../static/css/console.css"> + <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> + <script type="text/javascript" src="../static/js/common.js"></script> + <script type="text/javascript" src="../static/js/layer/layer.js"></script> <style> - /* 澶撮儴 */ - header { - height: 20%; - border: 1px solid red; - } - /* 涓讳綋 */ - main { - height: 80%; - position: relative; - } - - .main-part { - position: absolute; - top: 100px; - left: 400px; - /*transform: translate(-50%, 0);*/ - } - /* 鍫嗗灈鏈鸿建閬� */ - .pathway { - border: 1px solid #000; - position: absolute; - background-color:#eee!important; - color: #000000 !important; - width: 100%; - margin-top: 10px; - z-index: -1; - } - </style> </head> <body> <header> - <span>鎻忚堪淇℃伅</span> -</header> -<main> - <!-- 璐ф灦 + 鍫嗗灈鏈� + 鍏ュ簱鐐� + 鍑哄簱鐐� --> - <div class="main-part"> + <!-- 绯荤粺杩愯鐘舵�� --> + <div class="system-state"> + <div class="system-icon"></div> + <span>绯荤粺杩愯涓�...</span> + </div> - <!--杈撻�佺嚎--> + <!-- 淇℃伅灞曠ず --> + <div class="data-window"> + <!-- 鏍囬 --> + <h1>鑷姩浠撳簱 WCS 鐩戞帶鍥�</h1> - <!--绗竴鎺�--> - <span>1#</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> - </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> - </div> - <!-- 鍫嗗灈鏈� --> - <div class="crn"> - <hr class="pathway"> - <div 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> - </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> - </div> - <br> - - <!--绗簩鎺�--> - <span>2#</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> - </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> - </div> - <!-- 鍫嗗灈鏈� --> - <div class="crn"> - <hr class="pathway"> - <div 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> - </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> + <!-- 棰滆壊鎻愮ず --> + <div class="tips"> + <div class="tips-item"> + <label>鍫嗗灈鏈虹姸鎬侀鑹�: </label> + <div class="item-group"> + <span class="machine-put">鍏ュ簱</span> + <span class="machine-take">鍑哄簱</span> + <span class="machine-stock-move">搴撳埌搴�</span> + <span class="machine-site-move">绔欏埌绔�</span> + <span class="machine-p-move">PToP</span> + <span class="machine-error">寮傚父</span> + <span class="machine-auto">鑷姩</span> + <span class="machine-unauto">闈炶嚜鍔�/鎵嬪姩</span> + </div> + </div> + <div class="tips-item"> + <label>杈撻�佽澶囩姸鎬侀鑹�: </label> + <div class="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> </div> + + <!--鍒嗗壊绾�--> + <!--<hr class="header-hr">--> +</header> +<main> + + <!----------- 宸ュ叿鏍� ----------> + <!-- 鍏ュ簱鍙� --> + <div class="cargo-put"></div> + <!-- 鎵爜鍣� --> + <div id="code-decoder-1" class="code-decoder"> + <span id="code-decoder-data-1" class="code-decoder-data">0</span> + </div> + + + <!-- 宸﹁緭閫佺嚎 --> + <!-- 绗竴鍒楋紙瀹藉害 100px锛�--> + <div class="site-row site-row-1"> + <div id="site-1" class="site" style="width: 80px; height: 50px;line-height: 50px">1[9999]</div> + <div id="site-2" class="site" >2</div> + <div id="site-3" class="site" style="width: 80px; height: 30px;line-height: 30px">3</div> + <div id="site-4" class="site" style="width: 80px; height: 60px;line-height: 60px">4</div> + <div id="site-5" class="site" style="width: 80px; height: 50px;line-height: 50px">5</div> + <div id="site-6" class="site" >6</div> + <div id="site-7" class="site" style="width: 80px; height: 68px;line-height: 68px">7</div> + <div id="site-8" class="site" style="width: 80px; height: 42px;line-height: 40px">8</div> + <div id="site-9" class="site" >9</div> + </div> + <!-- 绗簩鍒楋紙瀹藉害 100px锛� --> + <div class="site-row site-row-2"> + <div id="site-32" class="site" style="width: 80px; height: 50px;line-height: 50px">32</div> + <div id="site-31" class="site" >31</div> + <div id="site-30" class="site" style="width: 80px; height: 30px;line-height: 30px;">30</div> + <div id="site-23" class="site" >23</div> + <div id="site-22" class="site" style="width: 80px; height: 50px;line-height: 50px">22</div> + <div id="site-20" class="site" >20</div> + <div id="site-19" class="site" style="width: 80px;">19</div> + <div id="site-17" class="site" >17</div> + <div id="site-16" class="site" style="width: 80px; height: 35px;line-height: 35px">16</div> + <div id="site-15" class="site" style="width: 80px; height: 35px;line-height: 35px">15</div> + <div id="site-13" class="site" >13</div> + <div id="site-12" class="site" style="width: 80px;">12</div> + <div id="site-10" class="site" >10</div> + </div> + <!-- 绗笁鍒楋紙瀹藉害 100px锛�--> + <div class="site-row site-row-3"> + <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div> + <div id="site-29" class="site" style="width: 50px;">29</div> + <div id="site-28" class="site" style="width: 50px;">28</div> + <div class="site-none" style="width: 80px; height: 50px;line-height: 30px"></div> + <div id="site-24" class="site" >24</div> + </div> + <!-- 绗洓鍒楋紙瀹藉害 100px锛�--> + <div class="site-row site-row-4"> + <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div> + <div id="site-27" class="site" >27</div> + <div id="site-26" class="site" style="width: 80px; height: 30px;line-height: 30px">26</div> + <div id="site-25" class="site" >25</div> + </div> + + <!-- 璐ф灦 + 鍫嗗灈鏈� + 鍏ュ簱绔欑偣 + 鍑哄簱绔欑偣 --> + <div class="main-part"> + <!--绗簩鎺�--> + <div class="lane"> + <span class="row-no">2#</span> + <!-- 璐ф灦 --> + <div class="stock-group"> + <div class="site site-none"> </div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + <div class="stock-group"> + <div id="site-21" class="site">21</div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + <!-- 鍫嗗灈鏈� --> + <div class="crn"> + <hr class="pathway"> + <div id="crn1" class="machine"></div> + </div> + <!-- 璐ф灦 --> + <div class="stock-group"> + <div id="site-18" class="site">18</div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + <div class="stock-group"> + <div class="site site-none"> </div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + </div> + + <!--绗竴鎺�--> + <div class="lane"> + <!-- 璐ф灦 --> + <div class="stock-group"> + <div class="site site-none"> </div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + <div class="stock-group"> + <div id="site-14" class="site">14</div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + <!-- 鍫嗗灈鏈� --> + <div class="crn"> + <hr class="pathway"> + <div id="crn2" class="machine"></div> + </div> + <!-- 璐ф灦 --> + <div class="stock-group"> + <div id="site-11" class="site">11</div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + <div class="stock-group"> + <div class="site site-none"> </div> + <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> + <button class="item">27</button> + <button class="item">28</button> + <div class="site site-none"> </div> + </div> + <span class="row-no">1#</span> + </div> + </div> + + <!-- 鍙宠緭閫佺嚎 --> + <!--<input id="val" type="text">--> + <!--<button id="animate">animate</button>--> </main> </body> +<script> + + var crn1Position = 0; + var crn2Position = 0; + // 鍒濆鍖� + getSitesInfo(); + getCrnInfo(); + // 瀹炴椂璁块棶 + setInterval(function () { + getCrnInfo(); + }, 500); + setInterval(function () { + getSitesInfo(); + }, 3000); + + // 杈撻�佽澶囧疄鏃舵暟鎹幏鍙� + 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++){ + $("#site-"+sites[i].siteId).attr("class", "site " + sites[i].siteStatus); + } + } else if (res.code === 403){ + top.location.href = baseUrl+"/login"; + } else { + alert(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++){ + crnAnimate(crns[i].crnId, crns[i].offset); + } + } else if (res.code === 403){ + top.location.href = baseUrl+"/login"; + } else { + alert(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){ + + } else if (res.code === 403){ + top.location.href = baseUrl+"/login"; + } else { + alert(res.msg); + } + } + }); + } + + // 鍫嗗灈鏈哄亸绉诲姩鐢� + function crnAnimate(id, leftVal) { + switch (id) { + case 1: + $("#crn1").animate({left: leftVal+'px'}, 1000); + crn1Position = leftVal; + break; + case 2: + $("#crn2").animate({left: leftVal+'px'}, 1000); + crn2Position = leftVal; + break; + default: + break + } + } + + + $('.item').on('click', function () { + layer.open({ + type: 1, + shadeClose: true, //鐐瑰嚮閬僵鍏抽棴灞� + content: 'text' + }); + }); + $('#animate').click(function () { + crnAnimate(1, $('#val').val()); + }); + +</script> </html> \ No newline at end of file -- Gitblit v1.9.1