banner

Junjie

2023-07-21 57eafefaf4b2d9b7d7cc238630a7f152d9f82636

banner

 src/main/webapp/static/wms/js/realtimeWatch/pipeline.js

New file
@@ -0,0 +1,348 @@
var pageCurr;
var tableData;
// 定义一个变量来保存滚动条的位置
var scrollLeft = 0;
layui.config({
    base: baseUrl + "/static/wms/layui/lay/modules/"
}).use(['table','laydate', 'form', 'admin'], function(){
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;
    var layDate = layui.laydate;
    var form = layui.form;
    var admin = layui.admin;

    // 数据渲染
    tableIns = table.render({
        elem: '#crn',
        headers: {token: localStorage.getItem('token')},
        url: baseUrl+'/crn/list/auth',
        page: false,
        limit: 500,
        limits: [15, 30, 50, 100, 200, 500],
        toolbar: '#toolbar',
        cellMinWidth: 100,
        height: 'full-120',
        cols: [[
            {field: 'crnNo', align: 'center',title: '堆垛机'}
            ,{field: 'workNo', align: 'center',title: '工作号'}
            ,{field: 'statusType', align: 'center',title: '模式'}
            ,{field: 'wrkStatus', align: 'center',title: '任务状态',width: 120}
            ,{field: 'deviceStatus', align: 'center',title: '设备状态'}
            ,{field: 'loading', align: 'center',title: '有物'}
            ,{field: 'bay', align: 'center',title: '列'}
            ,{field: 'lev', align: 'center',title: '层'}
            ,{field: 'warnCode', align: 'center',title: '故障代码'}
            ,{field: 'alarm', align: 'center',title: '故障描述'}
            ,{field: 'sourceStaNo', align: 'center',title: '源站'}
            ,{field: 'staNo', align: 'center',title: '目标站'}
            ,{field: 'sourceLocNo', align: 'center',title: '源库位'}
            ,{field: 'locNo', align: 'center',title: '目标库位'}
            ,{field: 'forkOffset', align: 'center',title: '货叉定位'}
            ,{field: 'liftPos', align: 'center',title: '载货台定位'}
            ,{field: 'walkPos', align: 'center',title: '走行在定位'}
            ,{field: 'xspeed', align: 'center',title: '走行速度（m/min)'}
            ,{field: 'yspeed', align: 'center',title: '升降速度（m/min)'}
            ,{field: 'zspeed', align: 'center',title: '叉牙速度（m/min)'}
            ,{field: 'xdistance', align: 'center',title: '走行距离(Km)'}
            ,{field: 'ydistance', align: 'center',title: '升降距离(Km)'}
            ,{field: 'xduration', align: 'center',title: '走行时长(H)'}
            ,{field: 'yduration', align: 'center',title: '升降时长(H)'}

            // ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:120}
        ]],
        request: {
            pageName: 'curr',
            pageSize: 'limit'
        },
        parseData: function (res) {
            return {
                'code': res.code,
                'msg': res.msg,
                'count': res.count,
                'data': res.data
            }
        },
        response: {
            statusCode: 200
        },
        done: function(res, curr, count) {
            if (res.code === 403) {
                top.location.href = baseUrl+"/";
            }
            pageCurr=curr;
            limit();
            tableData = table.cache.crn;

            $(".layui-table-tool").hide()
        }
    });

    // 监听排序事件
    table.on('sort(crn)', function (obj) {
        var searchData = {};
        $.each($('#search-box [name]').serializeArray(), function() {
            searchData[this.name] = this.value;
        });
        searchData['orderByField'] = obj.field;
        searchData['orderByType'] = obj.type;
        tableIns.reload({
            where: searchData,
            page: {curr: 1}
        });
    });

    // 监听头工具栏事件
    table.on('toolbar(crn)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id).data;
        switch(obj.event) {
            case 'addData':
                showEditModel();
                break;
            case 'exportData':
                admin.confirm('确定导出Excel吗', {shadeClose: true}, function(){
                    var titles=[];
                    var fields=[];
                    obj.config.cols[0].map(function (col) {
                        if (col.type === 'normal' && col.hide === false && col.toolbar == null) {
                            titles.push(col.title);
                            fields.push(col.field);
                        }
                    });
                    var exportData = {};
                    $.each($('#search-box [name]').serializeArray(), function() {
                        exportData[this.name] = this.value;
                    });
                    var param = {
                        'apiConfig': exportData,
                        'fields': fields
                    };
                    $.ajax({
                        url: baseUrl+"/apiConfig/export/auth",
                        headers: {'token': localStorage.getItem('token')},
                        data: JSON.stringify(param),
                        dataType:'json',
                        contentType:'application/json;charset=UTF-8',
                        method: 'POST',
                        success: function (res) {
                            layer.closeAll();
                            if (res.code === 200) {
                                table.exportFile(titles,res.data,'xls');
                            } else if (res.code === 403) {
                                top.location.href = baseUrl+"/";
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }
                        }
                    });
                });
                break;
        }
    });

    // 监听行工具事件
    table.on('tool(crn)', function(obj){
        var data = obj.data;
        switch (obj.event) {
            case 'edit':
                showEditModel(data);
                break;
        }
    });

    /* 弹窗 - 新增、修改 */
    function showEditModel(mData) {
        admin.open({
            type: 1,
            area: '600px',
            title: (mData ? '修改' : '添加') + '接口配置',
            content: $('#editDialog').html(),
            success: function (layero, dIndex) {
                layDateRender(mData);
                form.val('detail', mData);
                form.on('submit(editSubmit)', function (data) {
                    var loadIndex = layer.load(2);
                    $.ajax({
                        url: baseUrl+"/apiConfig/"+(mData?'update':'add')+"/auth",
                        headers: {'token': localStorage.getItem('token')},
                        data: data.field,
                        method: 'POST',
                        success: function (res) {
                            layer.close(loadIndex);
                            if (res.code === 200){
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                tableReload();
                            } else if (res.code === 403){
                                top.location.href = baseUrl+"/";
                            }else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    })
                    return false;
                });
                $(layero).children('.layui-layer-content').css('overflow', 'visible');
                layui.form.render('select');
            }
        });
    }

    /* 删除 */
    function del(ids) {
        layer.confirm('确定要删除选中数据吗？', {
            skin: 'layui-layer-admin',
            shade: .1
        }, function (i) {
            layer.close(i);
            var loadIndex = layer.load(2);
            $.ajax({
                url: baseUrl+"/apiConfig/delete/auth",
                headers: {'token': localStorage.getItem('token')},
                data: {ids: ids},
                method: 'POST',
                success: function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200){
                        layer.msg(res.msg, {icon: 1});
                        tableReload();
                    } else if (res.code === 403){
                        top.location.href = baseUrl+"/";
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            })
        });
    }

    // 搜索
    form.on('submit(search)', function (data) {
        pageCurr = 1;
        tableReload(false);
    });

    // 重置
    form.on('submit(reset)', function (data) {
        pageCurr = 1;
        clearFormVal($('#search-box'));
        tableReload(false);
    });

    // 时间选择器
    function layDateRender(data) {
        setTimeout(function () {
            layDate.render({
                elem: '#createTime\\$',
                type: 'datetime',
                value: data!==undefined?data['createTime\\$']:null
            });
            layDate.render({
                elem: '#updateTime\\$',
                type: 'datetime',
                value: data!==undefined?data['updateTime\\$']:null
            });

        }, 300);
    }
    layDateRender();

    setInterval(() => {
        // 获取当前滚动条位置
        scrollLeft = $("#crn").next('.layui-table-view').find('.layui-table-body').scrollLeft();
        $.ajax({
            url: baseUrl+"/crn/list/auth",
            headers: {'token': localStorage.getItem('token')},
            data: {},
            dataType:'json',
            contentType:'application/json;charset=UTF-8',
            method: 'GET',
            success: function (res) {
                console.log(res)
                table.render({
                    elem: '#crn',
                    headers: {token: localStorage.getItem('token')},
                    data: res.data,
                    page: false,
                    limit: 500,
                    limits: [15, 30, 50, 100, 200, 500],
                    toolbar: '#toolbar',
                    cellMinWidth: 100,
                    height: 'full-120',
                    cols: [[
                        {field: 'crnNo', align: 'center',title: '堆垛机'}
                        ,{field: 'workNo', align: 'center',title: '工作号'}
                        ,{field: 'statusType', align: 'center',title: '模式'}
                        ,{field: 'wrkStatus', align: 'center',title: '任务状态',width: 120}
                        ,{field: 'deviceStatus', align: 'center',title: '设备状态'}
                        ,{field: 'loading', align: 'center',title: '有物'}
                        ,{field: 'bay', align: 'center',title: '列'}
                        ,{field: 'lev', align: 'center',title: '层'}
                        ,{field: 'warnCode', align: 'center',title: '故障代码'}
                        ,{field: 'alarm', align: 'center',title: '故障描述'}
                        ,{field: 'sourceStaNo', align: 'center',title: '源站'}
                        ,{field: 'staNo', align: 'center',title: '目标站'}
                        ,{field: 'sourceLocNo', align: 'center',title: '源库位'}
                        ,{field: 'locNo', align: 'center',title: '目标库位'}
                        ,{field: 'forkOffset', align: 'center',title: '货叉定位'}
                        ,{field: 'liftPos', align: 'center',title: '载货台定位'}
                        ,{field: 'walkPos', align: 'center',title: '走行在定位'}
                        ,{field: 'xspeed', align: 'center',title: '走行速度（m/min)'}
                        ,{field: 'yspeed', align: 'center',title: '升降速度（m/min)'}
                        ,{field: 'zspeed', align: 'center',title: '叉牙速度（m/min)'}
                        ,{field: 'xdistance', align: 'center',title: '走行距离(Km)'}
                        ,{field: 'ydistance', align: 'center',title: '升降距离(Km)'}
                        ,{field: 'xduration', align: 'center',title: '走行时长(H)'}
                        ,{field: 'yduration', align: 'center',title: '升降时长(H)'}

                        // ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:120}
                    ]],
                    request: {
                        pageName: 'curr',
                        pageSize: 'limit'
                    },
                    parseData: function (res) {
                        return {
                            'code': res.code,
                            'msg': res.msg,
                            'count': res.count,
                            'data': res.data
                        }
                    },
                    response: {
                        statusCode: 200
                    },
                    done: function(res, curr, count) {
                        if (res.code === 403) {
                            top.location.href = baseUrl+"/";
                        }
                        pageCurr=curr;
                        limit();
                        tableData = table.cache.crn;
                        // 恢复滚动条位置
                        $("#crn").next('.layui-table-view').find('.layui-table-body').scrollLeft(scrollLeft);

                        $(".layui-table-tool").hide()
                    }
                });
            }
        });
    }, 1000);

});

// 关闭动作
$(document).on('click','#data-detail-close', function () {
    parent.layer.closeAll();
});

function tableReload(child) {
    var searchData = {};
    $.each($('#search-box [name]').serializeArray(), function() {
        searchData[this.name] = this.value;
    });
    tableIns.reload({
        where: searchData,
        page: {curr: pageCurr}
    });
}

 src/main/webapp/views/realtimeWatch/pipeline2.html

New file
@@ -0,0 +1,434 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>

<div style="height: 100vh;padding-left: 6%">
    <div style="padding: 10px;height: 900px;">
        <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>
    </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>
</html>