#

vincent

2020-06-02 c350b737713fe518c22036dfc9a2574bcafcb15c

 src/main/webapp/views/crn.html

@@ -10,13 +10,8 @@
    <link rel="stylesheet" type="text/css" href="../static/css/common.css">
    <link rel="stylesheet" type="text/css" href="../static/css/crn.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>
    <style>

        /* 任务作业选择框 */
        .task-operator {
            height: 50%;
            overflow: hidden;
        }

    </style>
</head>
@@ -106,15 +101,15 @@
                </div>
                <div class="select-container-item">
                    <span>排</span>
                    <label><input type="number" name="points" min="0" /></label>
                    <label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
                </div>
                <div class="select-container-item">
                    <span>列</span>
                    <label><input type="number" name="points" min="0" /></label>
                    <label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
                </div>
                <div class="select-container-item">
                    <span>层</span>
                    <label><input type="number" name="points" min="0" /></label>
                    <label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
                </div>
            </div>
        </div>
@@ -128,15 +123,15 @@
                </div>
                <div class="select-container-item">
                    <span>排</span>
                    <label><input type="number" name="points" min="0" /></label>
                    <label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
                </div>
                <div class="select-container-item">
                    <span>列</span>
                    <label><input type="number" name="points" min="0" /></label>
                    <label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
                </div>
                <div class="select-container-item">
                    <span>层</span>
                    <label><input type="number" name="points" min="0" /></label>
                    <label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
                </div>
            </div>
        </div>
@@ -144,7 +139,21 @@

    <!-- 设备任务操作 -->
    <div class="task-operator">

        <fieldset>
            <legend>手动操作</legend>
            <div class="button-group">
                <button class="item">入库</button>
                <button class="item">出库</button>
                <button class="item">库位转移</button>
                <button class="item">站到站</button>
                <button class="item">坐标移动</button>
                <button class="item">回原点</button>
                <button class="item">任务完成</button>
                <button class="item">暂停</button>
                <button class="item">启动</button>
                <button class="item">清除命令</button>
            </div>
        </fieldset>
    </div>

</div>
@@ -154,67 +163,217 @@
</div>
</body>
<script>
    // 空白行数
    var crnStateTableBlankRows = 0;
    var crnMsgTableBlankRows = 0;
    // 实际行数
    var crnStateTableFullRows = 0;
    var crnMsgTableFullRows = 0;
    // 初始化
    var crnOutputDom = document.getElementById("crn-output");

    // 空白表格渲染
    $(document).ready(function() {
        // 表一
        var one1 = $('#crn-state-table thead').height();
        var total1 = $('.crn-state').height();
        var count1 = total1 / one1;
        count1 = parseInt(count1);
        var html1 = "";
        for (var i = 0; i < count1; i ++){
            html1 += " <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" +
                "     </tr>\n";
        }
        $('#crn-state-table tbody').after(html1);

        // 表二
        var one2 = $('#crn-msg-table thead').height();
        var total2 = $('.crn-msg').height();
        var count2 = total2 / one2;
        count2 = parseInt(count2);
        var html2 = "";
        for (var i = 0; i < count2; i ++){
            html2 += " <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" +
                "     </tr>\n";
        }
        $('#crn-msg-table tbody').after(html2);
        initCrnStateTable();
        getCrnStateInfo();
        initCrnMsgTable();
        getCrnMsgInfo();
    });
    // 数据更新
    setInterval(function () {
        getCrnStateInfo();
        getCrnMsgInfo();
        getCommandLog();
    },1000);
    setInterval(function () {
        getSiteOutput();
    },500);

    // 获取堆垛机执行中的命令
    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) {
                    top.location.href = baseUrl + "/login";
                } else {
                    alert(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].type);
                        setVal(tr.children("td").eq(2), table[i-1].warn);
                        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].bayCoor);
                        setVal(tr.children("td").eq(8), table[i-1].levCoor);
                        setVal(tr.children("td").eq(9), table[i-1].complete);
                        setVal(tr.children("td").eq(10), table[i-1].workNo);
                        setVal(tr.children("td").eq(11), table[i-1].status);
                        setVal(tr.children("td").eq(12), table[i-1].warnCode);
                    }
                } else if (res.code === 403){
                    top.location.href = baseUrl+"/login";
                }  else {
                    alert(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 !== 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].status);
                        setVal(tr.children("td").eq(2), table[i-1].workNo);
                        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].error);
                        setVal(tr.children("td").eq(8), table[i-1].origin);
                        setVal(tr.children("td").eq(9), table[i-1].command);
                    }
                } else if (res.code === 403){
                    top.location.href = baseUrl+"/login";
                }  else {
                    alert(res.msg);
                }
            }
        });
    }

    // 输送设备日志输出
    function getSiteOutput() {
        $.ajax({
            url: baseUrl + "/crn/output/site",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    crnOutput(res.data);
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/login";
                } else {
                    alert(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" +
                "       <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" +
                "     </tr>\n";
        }
        $('#crn-msg-table tbody').after(html);
    }

    // 日志输出框
    function crnOutput(content){
        crnOutputDom.value += content;
        crnOutputDom.scrollTop = crnOutputDom.scrollHeight;
    }
    setInterval(function () {
        crnOutput("\n" +new Date().toLocaleString() + "【2020-5-29 13:14:22】扫描plcA 目标站--273283723728327636432343234323422732837237283276364323432343234227328372372832763643234323432342");
    },500);


</script>
</html>