自动化立体仓库 - WCS系统
#
zjj
2025-03-29 432aa30874196937f6250b34c7ef6fb62dbaf984
src/main/webapp/views/pipeline.html
@@ -11,74 +11,162 @@
    <link rel="stylesheet" type="text/css" href="../static/css/pipeline.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>
        .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>
</head>
<body>
<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 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%">
        <main>
            <!-- plc异常日志监控版 -->
            <div id="plc-error" class="main-board" style="padding-left: 10px">
                <!-- 头部 -->
<!--                <div class="plc-log-header">-->
<!--                    &lt;!&ndash; 设备任务操作 &ndash;&gt;-->
<!--                    <div class="io-mode-oper">-->
<!--                        <fieldset>-->
<!--                            <legend>入出库模式(IO-Mode)</legend>-->
<!--                            <div class="io-mode-box">-->
<!--                                <label>F2</label>-->
<!--                                <button id="io-mode-2" class="ioModeBtn" onclick="ioModeSwitch(this.id)"> - </button>-->
<!--                            </div>-->
<!--                            <div class="io-mode-box">-->
<!--                                <label>F4</label>-->
<!--                                <button id="io-mode-4" class="ioModeBtn" onclick="ioModeSwitch(this.id)"> - </button>-->
<!--                            </div>-->
<!--                        </fieldset>-->
<!--                    </div>-->
<!--                    &lt;!&ndash;            <div style="height: 40%">&ndash;&gt;-->
<!--                    &lt;!&ndash;                <span>东侧PLC执行指令</span>&ndash;&gt;-->
<!--                    &lt;!&ndash;            </div>&ndash;&gt;-->
<!--                    &lt;!&ndash;            <div style="height: 40%">&ndash;&gt;-->
<!--                    &lt;!&ndash;                <span>西侧PLC执行指令</span>&ndash;&gt;-->
<!--                    &lt;!&ndash;            </div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    <div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                        <span style="color: #1E9FFF">PLC异常信息表:</span>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--                </div>-->
                <!-- 主体 -->
                <div class="plc-log-body">
                    <div>
                        <span style="color: #1E9FFF">PLC异常信息表:</span>
                    </div>
                    <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 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>
            <!-- 站点状态数据监控版 -->
            <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 style="width: 200px">序号</th>
                        <th style="width: 400px">PLC错误描述</th>
                        <th style="width: 400px">异常</th>
                        <th>站号</th>
                        <th>工作号</th>
                        <th>自动</th>
                        <th>有物</th>
                        <th>可入</th>
                        <th>可出</th>
                        <th>入库标记</th>
                        <th>空板信号</th>
                        <th>已完成任务</th>
                        <th>高低库位</th>
                    </tr>
                </thead>
                <tbody>
                    </thead>
                    <!-- 表格内容 -->
                    <tbody></tbody>
                </table>
            </div>
        </main>
        <footer>
            <textarea id="output"></textarea>
        </footer>
                </tbody>
            </table>
        <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>
    </div>
    <!-- 站点状态数据监控版 -->
    <div id="site-monitor" class="main-board">
        <!-- 表格 -->
        <table id="site-table">
            <!-- 表头 -->
            <thead>
                <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>
</body>
<script>
    // 初始化
    // 空白行数
    var stop = false
    var plcErrorTableBlankRows = 0;
    var siteTableBlankRows = 0;
    // 实际行数
@@ -86,6 +174,7 @@
    var siteTableFullRows = 0;
    var outputDom = document.getElementById("output");
    $(document).ready(function() {
        getIoModeInfo();
        initPlcErrorTable();
        getPlcError();
        initSiteTable();
@@ -94,12 +183,74 @@
    // 实时访问
    setInterval(function () {
        getPlcError();
        getSite();
        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() {
@@ -121,7 +272,7 @@
                } else if (res.code === 403){
                    window.location.href = baseUrl+"/login";
                }  else {
                    alert(res.msg);
                    console.log(res.msg);
                }
            }
        });
@@ -147,28 +298,17 @@
                        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].canining);
                        setVal(tr.children("td").eq(5), table[i-1].canouting);
                        setVal(tr.children("td").eq(6), table[i-1].inreqIn);
                        setVal(tr.children("td").eq(7), table[i-1].inreqOut);
                        setVal(tr.children("td").eq(8), table[i-1].highLow);
                        setVal(tr.children("td").eq(9), table[i-1].staNo);
                        // tr.children("td").eq(0).html(table[i-1].devNo);
                        // tr.children("td").eq(1).html(table[i-1].workNo);
                        // tr.children("td").eq(2).html(table[i-1].autoing);
                        // tr.children("td").eq(3).html(table[i-1].loading);
                        // tr.children("td").eq(4).html(table[i-1].canining);
                        // tr.children("td").eq(5).html(table[i-1].canouting);
                        // tr.children("td").eq(6).html(table[i-1].inreqIn);
                        // tr.children("td").eq(7).html(table[i-1].inreqOut);
                        // tr.children("td").eq(8).html(table[i-1].highLow);
                        // tr.children("td").eq(9).html(table[i-1].staNo);
                        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].finishWorkNo);
                        setVal(tr.children("td").eq(9), table[i-1].locType1);
                    }
                } else if (res.code === 403){
                    window.location.href = baseUrl+"/login";
                }  else {
                    alert(res.msg);
                    console.log(res.msg);
                }
            }
        });
@@ -255,5 +395,59 @@
        $('#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>
</html>