自动化立库仓库-WCS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
zjj
2024-03-25 1b0ad5a82848c113d89dbd3259e0e40604b4b17a 
 src/main/webapp/views/realtimeWatch/pipeline.html


@@ -1,437 +1,100 @@


<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta charset="utf-8">


    <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/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/pipeline.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>


        .io-mode-box {


            float: left;


            width: 16%;


            text-align: center;


        }


        .io-mode-box label {


            font-weight: bolder;


        }


        .ioModeBtn {


            vertical-align: middle;


            width: 50%;


            height: 30px;


            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;


        }


    </style>


    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <link rel="stylesheet" href="../../static/wms/layui/css/layui.css" media="all">


    <link rel="stylesheet" href="../../static/wms/css/admin.css?v=318" media="all">


    <link rel="stylesheet" href="../../static/wms/css/cool.css" media="all">


</head>


<body>


<div style="padding: 10px;height: 100%;float: left;width: 6%">


    <div class="button-window"></div>


</div>




<div style="height: 100vh;padding-left: 6%">


    <div style="padding: 10px;height: 100%">


        <main>




            <!-- plc异常日志监控版 -->


            <div id="plc-error" class="main-board" style="padding-left: 10px">


                <!-- 头部 -->


                <div class="plc-log-header">


                    <!--            <div style="height: 40%">-->


                    <!--                <span>东侧PLC执行指令</span>-->


                    <!--            </div>-->


                    <!--            <div style="height: 40%">-->


                    <!--                <span>西侧PLC执行指令</span>-->


                    <!--            </div>-->


                    <div>


                        <span style="color: #1E9FFF">PLC异常信息表:</span>


                    </div>


                </div>




                <!-- 主体 -->


                <div class="plc-log-body">


                    <table id="plc-error-table">


                        <thead>


                        <tr>


                            <th style="width: 200px">序号</th>


                            <th style="width: 400px">PLC错误描述</th>


                            <th style="width: 400px">异常</th>


                        </tr>


                        </thead>


                        <tbody>




                        </tbody>


                    </table>


                </div>


            </div>




            <!-- 站点状态数据监控版 -->


            <div id="site-monitor" class="main-board">


                <!-- 表格 -->


                <!--固定表头 table 加table-layout: fixed;  th 加 position:sticky;top: 0;-->


                <table id="site-table" style="table-layout: fixed;">


                    <!-- 表头 -->


                    <thead style="position:sticky;top: 0;">


                    <tr>


                        <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>


        </main>


        <footer>


            <textarea id="output"></textarea>


        </footer>




        <div id="site-detl" style="display: none">


            <form>


                <div class="form-item">


                    <label class="form-label">站号:</label>


                    <div class="form-input">


                        <input id="siteId" name="siteId" class="layui-input" lay-verify="required|number" autocomplete="off" disabled="disabled">


                    </div>


                </div>


                <div class="form-item">


                    <label class="form-label">工作号:</label>


                    <div class="form-input">


                        <input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">


                    </div>


                </div>


                <div class="form-item">


                    <label class="form-label">目标站:</label>


                    <div class="form-input">


                        <input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">


                    </div>


                </div>


                <div class="form-item">


                    <label class="form-label">入库标记:</label>


                    <div class="form-input">


                        <input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off">


                    </div>


                </div>


                <div class="form-item form-button-container">


                    <button class="form-button" id="save">保存</button>


                    <button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button>


                </div>


            </form>


<div class="layui-fluid">


    <div class="layui-card">


        <div class="layui-card-body">


            <!--            <div class="layui-form toolbar" id="search-box">-->


            <!--                <div class="layui-form-item">-->


            <!--                    <div class="layui-inline">-->


            <!--                        <div class="layui-input-inline">-->


            <!--                            <input class="layui-input" type="text" name="id" placeholder="编号" autocomplete="off">-->


            <!--                        </div>-->


            <!--                    </div>-->


            <!--                    <div class="layui-inline">&emsp;-->


            <!--                        <button class="layui-btn icon-btn" lay-filter="search" lay-submit>-->


            <!--                            <i class="layui-icon">&#xe615;</i>刷新-->


            <!--                        </button>-->


            <!--                        <button class="layui-btn icon-btn" lay-filter="reset" lay-submit>-->


            <!--                            <i class="layui-icon">&#xe666;</i>重置-->


            <!--                        </button>-->


            <!--                    </div>-->


            <!--                </div>-->


            <!--            </div>-->


            <table class="layui-hide" id="pipeline" lay-filter="pipeline"></table>


        </div>


    </div>




</div>


</body>


<script>


    // 初始化


    // 空白行数


    var stop = false


    var plcErrorTableBlankRows = 0;


    var siteTableBlankRows = 0;


    // 实际行数


    var plcErrorTableFullRows = 0;


    var siteTableFullRows = 0;


    var outputDom = document.getElementById("output");


    $(document).ready(function() {


        getIoModeInfo();


        initPlcErrorTable();


        getPlcError();


        initSiteTable();


        getSite();


    });


    // 实时访问


    setInterval(function () {


        getPlcError();


        starGetSite();


        getIoModeInfo();


    }, 1000);


    setInterval(function () {


        getSiteOutput();


    },500);


    function starGetSite() {


        if (stop) {


            return


        } else {


            getSite();


        }


    }




    var ioModeData;


    function getIoModeInfo() {


        $.ajax({


            url: baseUrl+ "/site/io/mode/info/site",


            headers: {'token': localStorage.getItem('token')},


            method: 'GET',


            success: function (res) {


                if (res.code === 200){


                    ioModeData = res.data;


                    ioModeData.forEach(function (e) {


                        $("#io-mode-"+e.floor).html(e.modeDesc);


                    })


                } else if (res.code === 403){


                    window.location.href = baseUrl+"/login";


                }  else {


                    console.log(res.msg);


                }


            }


        });


    }




    /**


     * 强制切换入出库模式


     */


    function ioModeSwitch(el) {


        var floor = el.split("-")[2];


        if (ioModeData != null && ioModeData.length > 1) {


            ioModeData.forEach(function(e) {


                if (e.floor === Number(floor)) {


                    if (e.modeVal === 3 || e.modeVal === 4) {


                        layer.confirm('确定切换为入库模式吗？',function () {


                            $.ajax({


                                url: baseUrl+ "/site/io/mode/action/site",


                                headers: {'token': localStorage.getItem('token')},


                                data: {floor: e.floor},


                                method: 'POST',


                                success: function (res) {


                                    if (res.code === 200){


                                        layer.msg("暂时不能切换！", {icon: 1})


                                    } else if (res.code === 403){


                                        window.location.href = baseUrl+"/login";


                                    }  else {


                                        console.log(res.msg);


                                    }


                                }


                            });


                            layer.closeAll();


                        })


                    }


                }


            });


        }




    }




    // plc异常信息表获取


    function getPlcError() {


        var tableEl = $('#plc-error-table');


        tableEl.children("tr").children("td").html("");


        $.ajax({


            url: baseUrl+ "/site/table/plc/errors",


            headers: {'token': localStorage.getItem('token')},


            method: 'POST',


            success: function (res) {


                if (res.code === 200){


                    var table = res.data;


                    for (var i=1;i<=table.length;i++){


                        var tr = tableEl.find("tr").eq(i);


                        tr.children("td").eq(0).html(table[i-1].no);


                        tr.children("td").eq(1).html(table[i-1].plcDesc);


                        tr.children("td").eq(2).html(table[i-1].error);


                    }


                } else if (res.code === 403){


                    window.location.href = baseUrl+"/login";


                }  else {


                    console.log(res.msg);


                }


            }


        });


    }




    // 站点信息表获取


    function getSite() {


        var tableEl = $('#site-table');


        $.ajax({


            url: baseUrl+ "/site/table/site",


            headers: {'token': localStorage.getItem('token')},


            method: 'POST',


            success: function (res) {


                if (res.code === 200){


                    var table = res.data;


                    if (table.length > siteTableBlankRows && table.length !== siteTableFullRows) {


                        initSiteTable(table.length-siteTableBlankRows);


                        siteTableFullRows = 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].devNo);


                        setVal(tr.children("td").eq(1), table[i-1].workNo);


                        setVal(tr.children("td").eq(2), table[i-1].autoing);


                        setVal(tr.children("td").eq(3), table[i-1].loading);


                        setVal(tr.children("td").eq(4), table[i-1].inEnable);


                        setVal(tr.children("td").eq(5), table[i-1].outEnable);


                        setVal(tr.children("td").eq(6), table[i-1].pakMk);


                        setVal(tr.children("td").eq(7), table[i-1].emptyMk);


                        setVal(tr.children("td").eq(8), table[i-1].staNo);


                        setVal(tr.children("td").eq(9), table[i-1].locType1);


                    }


                } else if (res.code === 403){


                    window.location.href = baseUrl+"/login";


                }  else {


                    console.log(res.msg);


                }


            }


        });


    }




    // 输送设备日志输出


    function getSiteOutput() {


        $.ajax({


            url: baseUrl + "/site/output/site",


            headers: {'token': localStorage.getItem('token')},


            method: 'POST',


            success: function (res) {


                if (res.code === 200) {


                    output(res.data);


                } else if (res.code === 403) {


                    window.location.href = baseUrl + "/login";


                } else {


                    alert(res.msg);


                }


            }


        })


    }




    // 日志输出框


    function output(content){


        outputDom.value += content;


        outputDom.scrollTop = outputDom.scrollHeight;


    }




    // ------------------------------------------------------------------------------------------------




    // plc异常空白表格渲染


    function initPlcErrorTable(row) {


        var line;


        if (row === undefined){


            var one = $('#plc-error-table thead').height();


            var total = $('.plc-log-body').height();


            var count = total / one;


            count = parseInt(count) - 1;


            plcErrorTableBlankRows = 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" +


                "     </tr>\n";


        }


        $('#plc-error-table tbody').after(html);


    }




    // 站点空白表格渲染


    function initSiteTable(row) {


        var line;


        if (row === undefined){


            var one = $('#site-table thead').height();


            var total = $('#site-monitor').height();


            var count = total / one;


            count = parseInt(count) - 1;


            siteTableBlankRows = 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";


        }


        $('#site-table tbody').after(html);


    }




    // 详情操作 -------------------------------------------------------------------------


    var layerDetl;


    $(document).on('dblclick ','#site-table tr', function () {


        stop = true


        var siteId = $(this).children("td").eq(0).html();


        if (siteId !== null && siteId !== "") {


            layerDetl = layer.open({


                type: 1,


                title: false,


                shadeClose: true,


                offset: 'rt',


                anim: 5,


                shade: [0],


                area: ['340px', '255px'],


                closeBtn: 0,


                content: $("#site-detl"),


                success: function(layero, index){


                    http.get(baseUrl+ "/site/detl/"+siteId, null, function (res) {


                        $('#siteId').val(siteId);


                        $('#workNo').val(res.data.workNo);


                        $('#staNo').val(res.data.staNo);


                        $('#pakMk').val(res.data.pakMk);


                    })


                },


                end: function () {


                    $('#siteId').val("");


                    $('#workNo').val("");


                    $('#staNo').val("");


                    $('#pakMk').val("");


                    stop = false


                }


            })


        }




    });




    $(document).on('click ','#save', function () {


        http.post(baseUrl+ "/site//detl/update", {


            siteId: $('#siteId').val(),


            workNo: $('#workNo').val(),


            staNo:  $('#staNo').val(),


            pakMk: $('#pakMk').val()


        }, function (res) {


            layer.msg("修改成功",{icon: 1,});


        })


    })


    $(document).on('click ','#cancel', function () {


        $('#siteId').val("");


        $('#workNo').val("");


        $('#staNo').val("");


        $('#pakMk').val("");


        layer.close(layerDetl);


    })




<script type="text/html" id="toolbar">


    <div class="layui-btn-container">


        <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData" style="visibility: hidden">新增</button>


        <button class="layui-btn layui-btn-sm layui-btn-danger" id="btn-delete" lay-event="deleteData" style="visibility: hidden">删除</button>


        <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData" style="float: right;visibility: hidden">导出</button>


    </div>


</script>


</html>




<script type="text/html" id="operate">


    <a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">修改</a>


<!--    <a class="layui-btn layui-btn-danger layui-btn-xs btn-edit" lay-event="del">删除</a>-->


</script>




<script type="text/javascript" src="../../static/wms/js/jquery/jquery-3.3.1.min.js"></script>


<script type="text/javascript" src="../../static/wms/layui/layui.js" charset="utf-8"></script>


<script type="text/javascript" src="../../static/wms/js/common.js" charset="utf-8"></script>


<script type="text/javascript" src="../../static/wms/js/cool.js" charset="utf-8"></script>


<script type="text/javascript" src="../../static/wms/js/realtimeWatch/pipeline.js" charset="utf-8"></script>


</body>


<!-- 表单弹窗 -->


<script type="text/html" id="editDialog">


    <form id="detail" lay-filter="detail" class="layui-form admin-form model-form">


        <input name="id" type="hidden">


        <div class="layui-row">


            <div class="layui-col-md12">


                <div class="layui-form-item">


                    <label class="layui-form-label">站号: </label>


                    <div class="layui-input-block">


                        <input class="layui-input" id="devNo" name="devNo" disabled placeholder="">


                    </div>


                </div>


                <div class="layui-form-item">


                    <label class="layui-form-label">工作号: </label>


                    <div class="layui-input-block">


                        <input class="layui-input" id="workNo" name="workNo" placeholder="">


                    </div>


                </div>


                <div class="layui-form-item">


                    <label class="layui-form-label">目标站: </label>


                    <div class="layui-input-block">


                        <input class="layui-input" id="staNo" name="staNo" placeholder="">


                    </div>


                </div>


                <div class="layui-form-item">


                    <label class="layui-form-label">入库标记: </label>


                    <div class="layui-input-block">


                        <input class="layui-input" id="pakMk" name="pakMk" placeholder="">


                    </div>


                </div>




            </div>


        </div>


        <hr class="layui-bg-gray">


        <div class="layui-form-item text-right">


            <button class="layui-btn" lay-filter="editSubmit" lay-submit="">保存</button>


            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>


        </div>


    </form>


</script>


</html>