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 | 766 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 398 insertions(+), 368 deletions(-) diff --git a/src/main/webapp/views/console.html b/src/main/webapp/views/console.html index 2a05660..47fc13a 100644 --- a/src/main/webapp/views/console.html +++ b/src/main/webapp/views/console.html @@ -11,79 +11,9 @@ <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%; - opacity: 0.8; - position: relative; - } - /* 绯荤粺杩愯鐘舵�� */ - .system-state { - float: left; - margin-left: 30px; - margin-top: 30px; - text-align: center; - color: #2d6aff; - } - .system-icon { - width: 100px; - height: 100px; - background-image: url("../static/image/stop48.png"); - background-repeat: no-repeat; - background-size:100% 100%; - background-position: top center; - cursor: pointer; - } - - /* 鐘舵�佹樉绀� */ - .data-window { - width: 70%; - text-align: center; - } - .data-window h1 { - font-size: 3em; - margin: 0; - letter-spacing: 1px; - font-weight: inherit; - } - .crn-label, .site-label { - display: inline-block; - width: 15%; - text-align: right; - margin-bottom: 5px; - font-size: 13px; - } - /* 鍫嗗灈鏈虹姸鎬� */ - .crn-state-group { - text-align: left; - } - .crn-state { - display: inline-block; - width: 50px; - text-align: center; - } - /* 绔欑偣鐘舵�� */ - .site-state-group { - text-align: left; - } - .site-state { - display: inline-block; - width: 50px; - text-align: center; - } - - - - - /* 鍒嗗壊绾� */ - .header-hr { - border-radius: 5px; - border: 1px solid #777; - width: 80%; - position: absolute; - bottom: 0; - } </style> </head> @@ -97,23 +27,50 @@ <!-- 淇℃伅灞曠ず --> <div class="data-window"> - <h1>鑷姩浠撳簱 WCS 鐩戞帶鍥�</h1> - <!--<!–<div class="crn-state-group">–>--> - <!--<!–<label class="crn-label">鍫嗗灈鏈虹姸鎬侀鑹�:</label>–>--> - <!--<!–<span class="crn-state" style="background-color: #21ff3a">鑷姩</span>–>--> - <!--<!–<span class="crn-state" style="background-color: red">寮傚父</span>–>--> - <!--<!–</div>–>--> - <!--<!–<div class="site-state-group">–>--> - <!--<!–<label class="site-label">杈撻�佽澶囩姸鎬侀鑹�:</label>–>--> - <!--<!–<span class="site-state" style="background-color: #21ff3a;">鑷姩</span>–>--> - <!--<!–<span class="site-state" style="background-color: red;">寮傚父</span>–>--> - <!--<!–</div>–>--> + <!-- 鏍囬 --> + <h1>鑷姩浠撳簱 WCS 鐩戞帶鍥�</h1> + + <!-- 棰滆壊鎻愮ず --> + <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"> + <!--<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锛�--> @@ -124,7 +81,7 @@ <div id="site-4" class="site" style="width: 80px; height: 60px;line-height: 60px">4</div> <div id="site-5" class="site" style="width: 80px; height: 50px;line-height: 50px">5</div> <div id="site-6" class="site" >6</div> - <div id="site-7" class="site" style="width: 80px; height: 82px;line-height: 82px">7</div> + <div id="site-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> @@ -132,14 +89,14 @@ <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; background-color: red;">30</div> + <div id="site-30" class="site" style="width: 80px; height: 30px;line-height: 30px;">30</div> <div id="site-23" class="site" >23</div> <div id="site-22" class="site" style="width: 80px; height: 50px;line-height: 50px">22</div> <div id="site-20" class="site" >20</div> <div id="site-19" class="site" style="width: 80px;">19</div> <div id="site-17" class="site" >17</div> - <div id="site-16" class="site" style="width: 80px; height: 42px;line-height: 40px">16</div> - <div id="site-15" class="site" style="width: 80px; height: 42px;line-height: 40px">15</div> + <div id="site-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> @@ -162,297 +119,366 @@ <!-- 璐ф灦 + 鍫嗗灈鏈� + 鍏ュ簱绔欑偣 + 鍑哄簱绔欑偣 --> <div class="main-part"> - <!--绗竴鎺�--> - <span class="row-no">1#</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> - <br> - <!--绗簩鎺�--> - <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 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="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 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> + <!--<input id="val" type="text">--> + <!--<button id="animate">animate</button>--> </main> - - </body> <script> + var crn1Position = 0; var crn2Position = 0; - $('#animate').click(function () { - crnAnimate(1, $('#val').val()); - }); + // 鍒濆鍖� + 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) { @@ -470,13 +496,17 @@ } } + $('.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