YCQ
whycq
2021-12-29 99b4f2a8876546974737446378e4cddc6317ea78
src/main/webapp/views/console.html
@@ -5,7 +5,7 @@
      <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" type="text/css" href="../static/css/normalize.css">-->
      
@@ -61,8 +61,8 @@
         </div>
         <!--&lt;!&ndash; 第6列(宽度 70px) &ndash;&gt;-->
         <div class="site-row site-row-6">
            <div id="site-120" class="site" style="height: 31px;line-height: 31px">120(8888)</div>
            <div id="site-121" class="site" style="height: 31px;line-height: 31px">121(8888)</div>
            <div id="site-120" class="site" style="height: 31px;line-height: 31px">120</div>
            <div id="site-121" class="site" style="height: 31px;line-height: 31px">121</div>
            <div id="site-122" class="site" style="height: 71px;line-height: 71px">122</div>
            <div id="site-123" class="site" style="height: 31px;line-height: 31px">123</div>
            <div id="site-124" class="site" style="height: 31px;line-height: 31px">124</div>
@@ -914,6 +914,7 @@
               </div>
            </div>
         </div>
         <!--底部-->
         <div id="body">
            <!-- 总开关 -->
            <div class="system-state">
@@ -931,11 +932,11 @@
               <div class="body-head">堆垛机状态</div>
               <div class="state">
                  <span>堆垛机 1</span>
                  <span>自动</span>
                  <span class="state-ss machine-put-flag   ">入库</span>
               </div>
               <div class="state">   
                  <span>堆垛机 2</span>
                  <span>自动</span>
                  <span class="state-ss machine-auto-flag   ">自动</span>
                  
               </div>
               <div class="button"><span>所有状态</span></div>
@@ -954,7 +955,7 @@
               <div class="body-head">输送线状态</div>
               <div class="state states">
                  <span>运输线总数</span>
                  <span>45</span>
                  <span class="line-ss">45</span>
               </div>
               <div class="button"><span>所有状态</span></div>
                  <div class="button item-group">
@@ -1194,27 +1195,51 @@
   </body>
</html>
<script type="text/javascript">
   // // 弹窗站点信息
   // $('.site').on('click',function(){
   //    var id = this.id.split("-")[1];
   //     $("#siteWindow").attr("style","display:block;");//显示div
   //     $(".detailed").empty();
   //     $('.detailed').append(id+'站点详细信息');
   // });
   // // 堆垛机信息
   // $('.machine').on('click',function(){
   //    var id = this.id.split("-")[1];
   //    $("#crnWindow").attr('style','display:block;');
   //    $('.detailed').empty();
   //    $('.detailed').append(id+'号堆垛机');
   // })
   // // 弹窗关闭
   // $('button').on('click',function(){
   //    $('#siteWindow').attr('style','display:none')
   //    $('#crnWindow').attr('style','display:none')
   // })
   // 弹窗站点信息
   $('.site').on('click',function(){
      var id = this.id.split("-")[1];
       $("#siteWindow").attr("style","display:block;");//显示div
       $(".detailed").empty();
       $('.detailed').append(id+'站点详细信息');
       $.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');
             }
          }
       })
   });
   // 堆垛机信息
   $('.machine').on('click',function(){
      var id = this.id.split("-")[1];
      $("#crnWindow").attr('style','display:block;');
      $('.detailed').empty();
      $('.detailed').append(id+'号堆垛机');
      $.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');
            }
         }
      })
   })
   // 弹窗关闭
   $('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();
@@ -1418,6 +1443,18 @@
            $("#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
      }
@@ -1426,69 +1463,69 @@
   // 页面点击事件监听 ---------------------------------------------------------
   // 输送设备点击事件
   $('.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');
         }
      });
   });
   // $('.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');
         }
      });
   });
   // $('.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');
   //       }
   //    });
   // });
   // 小车偏移动画