zy-wcs.git - Gitblit

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>堆垛机监控管理</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/wcs/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="../../static/wcs/css/common.css">
  <link rel="stylesheet" type="text/css" href="../../static/wcs/css/crn.css">
  <script type="text/javascript" src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="../../static/wcs/js/common.js"></script>
  <script type="text/javascript" src="../../static/wcs/js/layer/layer.js"></script>
  <style>
    .demoBtn {
      vertical-align: middle;
      width: 20%;
      height: 25px;
      left: 0;
      top: 0;
      text-shadow: inherit;
      font-size: 15px;
      margin-left: 5px;
      margin-right: 5px;
      display: inline-block;
      background-color: #FF5722;
      border: none;
      color: #FFF;
      box-shadow: 1px 1px 5px #B6B6B6;
      border-radius: 3px;
      cursor: pointer;
    }
 
    .demoBtn:hover {
      opacity: 0.8
    }
    .demoBtn:focus {
      outline: 0;
    }
  </style>
</head>
<body>
<div style="padding: 10px;height: 100%;float: left;width: 6%">
<!--  <div class="button-window"></div>-->
</div>
<div style="height: 100%;padding-left: 6%">
  <div style="padding: 10px;height: 100%">
    <!-- 日志监控板 -->
    <div class="log-board" >
      <!-- 执行命令 -->
 
      <!-- 执行命令 -->
      <div class="command-log" style="overflow: auto;">
        <h3>执行中的命令</h3>
        <div class="crn-command-item">
          <label>1#</label>
<!--          <button id="demoBtn-1" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
          <!--            <span>&nbsp;</span>-->
          <input id="crn1" disabled="disabled">
        </div>
        <div class="crn-command-item">
          <label>2#</label>
<!--          <button id="demoBtn-2" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
          <!--            <span>&nbsp;</span>-->
          <input id="crn2" disabled="disabled">
        </div>
        <div class="crn-command-item">
          <label>3#</label>
<!--          <button id="demoBtn-3" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
          <!--            <span>&nbsp;</span>-->
          <input id="crn3" disabled="disabled">
        </div>
<!--        <div class="crn-command-item">-->
<!--          <label>4#</label>-->
<!--&lt;!&ndash;          <button id="demoBtn-4" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>&ndash;&gt;-->
<!--          &lt;!&ndash;            <span>&nbsp;</span>&ndash;&gt;-->
<!--          <input id="crn4" disabled="disabled">-->
<!--        </div>-->
<!--        <div class="crn-command-item">-->
<!--          <label>5#</label>-->
<!--&lt;!&ndash;          <button id="demoBtn-5" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>&ndash;&gt;-->
<!--          &lt;!&ndash;            <span>&nbsp;</span>&ndash;&gt;-->
<!--          <input id="crn5" disabled="disabled">-->
<!--        </div>-->
<!--        <div class="crn-command-item">-->
<!--          <label>6#</label>-->
<!--&lt;!&ndash;          <button id="demoBtn-6" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>&ndash;&gt;-->
<!--          &lt;!&ndash;            <span>&nbsp;</span>&ndash;&gt;-->
<!--          <input id="crn6" disabled="disabled">-->
<!--        </div>-->
      </div>
      <!-- 堆垛机状态位信息 -->
      <div class="crn-state">
        <table id="crn-state-table">
          <thead>
          <tr>
            <th>堆垛机</th>
            <th>模式</th>
            <th>状态</th>
            <th>有物</th>
            <th>列</th>
            <th>层</th>
            <th>货叉定位</th>
            <th>载货台定位</th>
            <th>走行在定位</th>
            <th>故障代码</th>
            <th>故障描述</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 堆垛机状态 -->
    <div class="crn-msg">
      <table id="crn-msg-table">
        <thead>
        <tr>
          <th>堆垛机</th>
          <th>工作号</th>
          <th>状态</th>
          <th>源站</th>
          <th>目标站</th>
          <th>源库位</th>
          <th>目标库位</th>
          <th>走行速度（m/min)</th>
          <th>升降速度（m/min)</th>
          <th>叉牙速度（m/min)</th>
          <th>走行距离(Km)</th>
          <th>升降距离(Km)</th>
          <th>走行时长(H)</th>
          <th>升降时长(H)</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <!-- 手动操作 -->
    <div class="crn-operation">
 
      <!-- 遮罩层 -->
<!--      <div class="crn-operation-shade">-->
<!--        <span class="crn-operation-shade-span">-->
<!--            WCS 系统运行中，请停止后操作-->
<!--        </span>-->
<!--      </div>-->
 
      <!-- 设备任务选择 -->
      <div class="task-select">
        <!-- 堆垛机选择 -->
<!--        <div id="crn-select" class="operator-item" style="width: 55%">-->
<!--          <span class="select-title">堆垛机号</span>-->
<!--          <div class="select-container" style="padding: 20px 0;">-->
<!--            <label><input type="radio" name="crnSelect" value="1" checked>&nbsp;1号堆垛机</label>-->
<!--            <label><input type="radio" name="crnSelect" value="2">&nbsp;2号堆垛机</label>-->
<!--            <label><input type="radio" name="crnSelect" value="3">&nbsp;3号堆垛机</label>-->
<!--            <label><input type="radio" name="crnSelect" value="4">&nbsp;4号堆垛机</label>-->
<!--            <label><input type="radio" name="crnSelect" value="5">&nbsp;5号堆垛机</label>-->
<!--            <label><input type="radio" name="crnSelect" value="6">&nbsp;6号堆垛机</label>-->
<!--          </div>-->
<!--        </div>-->
        <!-- 源站/源库位 选择 -->
<!--        <div id="source-select" class="operator-item">-->
<!--          <span class="select-title">源站/源库位</span>-->
<!--          <div class="select-container">-->
<!--            <div class="select-container-item">-->
<!--              <span>站</span>-->
<!--              <label><input id="sourceStaNo" type="number" name="points" min="0" /></label>-->
<!--            </div>-->
<!--            <div class="select-container-item">-->
<!--              <span>排</span>-->
<!--              <label><input id="sourceRow" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
<!--            </div>-->
<!--            <div class="select-container-item">-->
<!--              <span>列</span>-->
<!--              <label><input id="sourceBay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>-->
<!--            </div>-->
<!--            <div class="select-container-item">-->
<!--              <span>层</span>-->
<!--              <label><input id="sourceLev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash; 目标站/目标库位 选择 &ndash;&gt;-->
<!--        <div id="target-select" class="operator-item">-->
<!--          <span class="select-title">目标站/目标库位</span>-->
<!--          <div class="select-container">-->
<!--            <div class="select-container-item">-->
<!--              <span>站</span>-->
<!--              <label><input id="staNo" type="number" name="points" min="0" /></label>-->
<!--            </div>-->
<!--            <div class="select-container-item">-->
<!--              <span>排</span>-->
<!--              <label><input id="row" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
<!--            </div>-->
<!--            <div class="select-container-item">-->
<!--              <span>列</span>-->
<!--              <label><input id="bay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>-->
<!--            </div>-->
<!--            <div class="select-container-item">-->
<!--              <span>层</span>-->
<!--              <label><input id="lev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
 
<!--      &lt;!&ndash; 设备任务操作 &ndash;&gt;-->
<!--      <div class="task-operator">-->
<!--        <fieldset>-->
<!--          <legend>手动操作</legend>-->
<!--          <div class="button-group">-->
<!--            <button class="item" onclick="put()">入库</button>-->
<!--            <button class="item" onclick="take()">出库</button>-->
<!--            <button class="item" onclick="stockMove()">库位转移</button>-->
<!--            <button class="item" onclick="siteMove()">站到站</button>-->
<!--            &lt;!&ndash;                <button class="item" onclick="bacOrigin()">回原点</button>&ndash;&gt;-->
<!--            &lt;!&ndash;                <button class="item" onclick="reverseOrigin()">反原点</button>&ndash;&gt;-->
<!--            <button class="item" onclick="coorMove()">坐标移行</button>-->
<!--            <button class="item" onclick="taskComplete()">任务完成</button>-->
<!--            &lt;!&ndash;                <button class="item" onclick="pause()">暂停</button>&ndash;&gt;-->
<!--            &lt;!&ndash;                <button class="item" onclick="boot()">启动</button>&ndash;&gt;-->
<!--            <button class="item" onclick="clearCommand()">清除命令</button>-->
<!--            <button class="item" onclick="handleReset()">复位</button>-->
<!--          </div>-->
<!--        </fieldset>-->
<!--      </div>-->
 
    </div>
    <!-- 堆垛机日志输出 -->
    <div class="crn-output-board">
      <textarea id="crn-output"></textarea>
    </div>
  </div>
</div>
</body>
<script>
  // 空白行数
  var crnStateTableBlankRows = 0;
  var crnMsgTableBlankRows = 0;
  // 实际行数
  var crnStateTableFullRows = 0;
  var crnMsgTableFullRows = 0;
  // 初始化
  var crnOutputDom = document.getElementById("crn-output");
  $(document).ready(function() {
    getCommandLog();
    initCrnStateTable();
    getCrnStateInfo();
    initCrnMsgTable();
    getCrnMsgInfo();
    operatorBlockShow();
  });
  // 数据更新
  setInterval(function () {
    getCrnStateInfo();
    getCrnMsgInfo();
    getCommandLog();
  },1000);
  setInterval(function () {
    getCrnOutput();
    operatorBlockShow();
    initDemo();
  },500);
 
  // 判断手动操作模块是否可用
  function operatorBlockShow() {
    if (parent.systemRunning) {
      $('.crn-operation').css("opacity", "0.5");
      $('.crn-operation-shade').show();
      $('.crn-operation-shade-span').show();
    }  else {
      $('.crn-operation').css("opacity", "1");
      $('.crn-operation-shade').hide();
      $('.crn-operation-shade-span').hide();
    }
  }
 
  // 获取堆垛机执行中的命令
  function getCommandLog() {
    $.ajax({
      url: baseUrl + "/crn/command/ongoing",
      headers: {'token': localStorage.getItem('token')},
      method: 'POST',
      success: function (res) {
        if (res.code === 200) {
          var commands = res.data;
          for (var i=0; i<commands.length;i++){
            $("#crn"+commands[i].crnNo).val(commands[i].command);
          }
        } else if (res.code === 403) {
          window.location.href = baseUrl + "/login";
        } else {
          console.log(res.msg);
        }
      }
    })
  }
 
  // 堆垛机信息表获取 ---- 表一
  function getCrnStateInfo() {
    var tableEl = $('#crn-state-table');
    $.ajax({
      url: baseUrl+ "/crn/table/crn/state",
      headers: {'token': localStorage.getItem('token')},
      method: 'POST',
      success: function (res) {
        if (res.code === 200){
          var table = res.data;
          if (table.length > crnStateTableBlankRows && table.length !== crnStateTableFullRows) {
            initCrnStateTable(table.length-crnStateTableBlankRows);
            crnStateTableFullRows = table.length;
          }
          for (var i=1;i<=table.length;i++){
            var tr = tableEl.find("tr").eq(i);
            setVal(tr.children("td").eq(0), table[i-1].crnNo);
            setVal(tr.children("td").eq(1), table[i-1].statusType);
            setVal(tr.children("td").eq(2), table[i-1].status);
            setVal(tr.children("td").eq(3), table[i-1].loading);
            setVal(tr.children("td").eq(4), table[i-1].bay);
            setVal(tr.children("td").eq(5), table[i-1].lev);
            setVal(tr.children("td").eq(6), table[i-1].forkOffset);
            setVal(tr.children("td").eq(7), table[i-1].liftPos);
            setVal(tr.children("td").eq(8), table[i-1].walkPos);
            setVal(tr.children("td").eq(9), table[i-1].warnCode);
            setVal(tr.children("td").eq(10), table[i-1].alarm);
          }
        } else if (res.code === 403){
          window.location.href = baseUrl+"/login";
        }  else {
          console.log(res.msg);
        }
      }
    });
  }
 
  // 堆垛机数据表获取 ---- 表二
  function getCrnMsgInfo() {
    var tableEl = $('#crn-msg-table');
    $.ajax({
      url: baseUrl+ "/crn/table/crn/msg",
      headers: {'token': localStorage.getItem('token')},
      method: 'POST',
      success: function (res) {
        if (res.code === 200){
          var table = res.data;
          if (table.length > crnStateTableBlankRows && table.length !== crnMsgTableFullRows) {
            initCrnStateTable(table.length-crnStateTableBlankRows);
            crnMsgTableFullRows = table.length;
          }
          for (var i=1;i<=table.length;i++){
            var tr = tableEl.find("tr").eq(i);
            setVal(tr.children("td").eq(0), table[i-1].crnNo);
            setVal(tr.children("td").eq(1), table[i-1].workNo);
            setVal(tr.children("td").eq(2), table[i-1].status);
            setVal(tr.children("td").eq(3), table[i-1].sourceStaNo);
            setVal(tr.children("td").eq(4), table[i-1].staNo);
            setVal(tr.children("td").eq(5), table[i-1].sourceLocNo);
            setVal(tr.children("td").eq(6), table[i-1].locNo);
            setVal(tr.children("td").eq(7), table[i-1].xspeed);
            setVal(tr.children("td").eq(8), table[i-1].yspeed);
            setVal(tr.children("td").eq(9), table[i-1].zspeed);
            setVal(tr.children("td").eq(10), table[i-1].xdistance);
            setVal(tr.children("td").eq(11), table[i-1].ydistance);
            setVal(tr.children("td").eq(12), table[i-1].xduration);
            setVal(tr.children("td").eq(13), table[i-1].yduration);
          }
        } else if (res.code === 403){
          window.location.href = baseUrl+"/login";
        }  else {
          console.log(res.msg);
        }
      }
    });
  }
 
  // 堆垛机手动操作区 -----------------------------------------------------------------------
 
  function getReqParam() {
    var crnNo = $('input[name="crnSelect"]:checked').val();
    var sourceStaNo = $('#sourceStaNo').val();
    var sourceRow = $('#sourceRow').val();
    var sourceBay = $('#sourceBay').val();
    var sourceLev = $('#sourceLev').val();
    var staNo = $('#staNo').val();
    var row = $('#row').val();
    var bay = $('#bay').val();
    var lev = $('#lev').val();
    return {
      crnNo: crnNo,
      sourceStaNo: sourceStaNo,
      sourceRow: sourceRow,
      sourceBay: sourceBay,
      sourceLev: sourceLev,
      staNo: staNo,
      row: row,
      bay: bay,
      lev: lev
    };
  }
 
  // 入库
  function put() {
    http.post(baseUrl+"/crn/operator/put", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 出库
  function take() {
    http.post(baseUrl+"/crn/operator/take", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 库位转移
  function stockMove() {
    http.post(baseUrl+"/crn/operator/stockMove", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 站到站
  function siteMove() {
    http.post(baseUrl+"/crn/operator/siteMove", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 坐标移动
  function coorMove() {
    http.post(baseUrl+"/crn/operator/coorMove", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 回原点
  function bacOrigin() {
    http.post(baseUrl+"/crn/operator/bacOrigin", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 回原点
  function reverseOrigin() {
    http.post(baseUrl+"/crn/operator/reverseOrigin", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 任务完成
  function taskComplete() {
    http.post(baseUrl+"/crn/operator/taskComplete", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 暂停
  function pause() {
    http.post(baseUrl+"/crn/operator/pause", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 启动
  function boot() {
    http.post(baseUrl+"/crn/operator/boot", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 清除命令
  function clearCommand() {
    http.post(baseUrl+"/crn/operator/clearCommand", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 手动复位
  function handleReset() {
    http.post(baseUrl+"/crn/operator/handleReset", getReqParam(), function (res) {
      layer.msg(res.msg);
    });
  }
 
  // 输送设备日志输出 -----------------------------------------------------------------------
  function getCrnOutput() {
    $.ajax({
      url: baseUrl + "/crn/output/site",
      headers: {'token': localStorage.getItem('token')},
      method: 'POST',
      success: function (res) {
        console.log(res)
        if (res.code === 200) {
          crnOutput(res.data);
        } else if (res.code === 403) {
          window.location.href = baseUrl + "/login";
        } else {
          console.log(res.msg);
        }
      }
    })
  }
 
  // ------------------------------------------------------------------------------------------------
 
  // 堆垛机信息表获取  ----- 表一
  function initCrnStateTable(row) {
    var line;
    if (row === undefined){
      var one = $('#crn-state-table thead').height();
      var total = $('.crn-state').height();
      var count = total / one;
      count = parseInt(count) - 1;
      crnStateTableBlankRows = count;
      line = count;
    } else {
      line = row;
    }
    var html = "";
    for (var i = 0; i < line; i ++){
      html += " <tr>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "     </tr>\n";
    }
    $('#crn-state-table tbody').after(html);
  }
 
  // 堆垛机数据表获取  ----- 表二
  function initCrnMsgTable(row) {
    var line;
    if (row === undefined){
      var one = $('#crn-msg-table thead').height();
      var total = $('.crn-msg').height();
      var count = total / one;
      count = parseInt(count) - 1;
      crnMsgTableBlankRows = count;
      line = count;
    } else {
      line = row;
    }
    var html = "";
    for (var i = 0; i < line; i ++){
      html += " <tr>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "       <td></td>\n" +
              "     </tr>\n";
    }
    $('#crn-msg-table tbody').after(html);
  }
 
  // 日志输出框
  function crnOutput(content){
    crnOutputDom.value += content;
    crnOutputDom.scrollTop = crnOutputDom.scrollHeight;
  }
 
 
  var crnDemoData;
  function initDemo() {
    $.ajax({
      url: baseUrl+"/crn/demo/status",
      async: false,
      method: 'GET',
      success: function (res) {
        if (res.code === 200) {
          crnDemoData = res.data;
          crnDemoData.forEach(function (e) {
            $("#demoBtn-"+e.crnNo).html(e.demo?'停止':'演示');
          })
        } else if (res.code === 403){
          parent.location.href = baseUrl+"/login";
        }  else {
          layer.msg(res.msg, {icon: 2});
        }
      }
    })
  }
 
  function demoSwitch(el) {
    var crnId = el.split("-")[1];
    var opt;
    if (crnDemoData == null) {
      initDemo();
    }
    for (var i = 0; i<crnDemoData.length; i++) {
      if (Number(crnDemoData[i].crnNo) === Number(crnId)) {
        opt = !crnDemoData[i].demo;
      }
    }
    layer.confirm(crnId + ' 号堆垛机确定'+ (opt?'开始':'停止') + '演示吗？', function(){
      doDemo(crnId, 'root', opt); // 停止wcs系统
    });
  }
 
  function doDemo(crnId, password, opt) {
    // 加载tips
    var index = layer.load(1, {
      shade: [0.1,'#fff']
    });
    $.ajax({
      url: baseUrl+ "/crn/demo/switch",
      headers: {'token': localStorage.getItem('token')},
      // async: false,
      data: {
        crnId: Number(crnId),
        password: password,
        opt: opt
      },
      method: 'POST',
      success: function (res) {
        layer.close(index);
        if (res.code === 200){
          layer.msg(res.msg, {icon: 1});
        } else if (res.code === 403){
          window.location.href = baseUrl+"/login";
        }  else {
          layer.msg(res.msg, {icon: 2});
        }
      }
    });
 
  }
 
</script>
</html>