1
zhangc
6 天以前 f240886676a7fdcf50c11db965797903b952482c
src/main/webapp/views/pipeline.html
@@ -1,259 +1,415 @@
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<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/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../static/css/common.css">
    <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>
    <title>WCS输送设备管理</title>
    <link rel="stylesheet" href="../static/css/normalize.css">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/css/pipeline.css">
    <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;
            text-shadow: inherit;
            font-size: 15px;
            margin: 0 5px;
            display: inline-block;
            background-color: #FF5722;
            border: none;
            color: #FFF;
            box-shadow: 1px 1px 5px #B6B6B6;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
    <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
    <script src="../static/js/common.js"></script>
    <script src="../static/js/layer/layer.js"></script>
</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>
            <div style="height: 40%">
                <span>西侧PLC执行指令</span>
            </div>
            <div>
                <span style="color: #1E9FFF">PLC异常信息表:</span>
    <!-- 左侧按钮区域 -->
    <aside class="sidebar" style="padding: 10px; height: 100%; float: left; width: 6%;">
        <div class="button-window"></div>
    </aside>
    <!-- 主内容区域 -->
    <div class="main-content" style="height: 100%; padding-left: 6%;">
        <div class="container" style="padding: 10px; height: 100%;">
            <!-- 主要内容 -->
            <main>
                <!-- 站点状态数据监控版 -->
                <section id="site-monitor" class="main-board">
                    <!-- 表格 -->
                    <!-- 固定表头:table加table-layout: fixed; th加position:sticky;top: 0; -->
                    <table id="site-table" class="status-table" style="table-layout: fixed;">
                        <!-- 表头 -->
                        <thead class="table-header" 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 class="table-body"></tbody>
                    </table>
                </section>
            </main>
            <!-- 页脚区域 -->
            <footer>
                <textarea id="output" class="output-log"></textarea>
            </footer>
            <!-- 站点详情弹窗 -->
            <div id="site-detl" class="site-detail-form" style="display: none;">
                <form class="detail-form">
                    <div class="form-item">
                        <label class="form-label" for="siteId">站号:</label>
                        <div class="form-input">
                            <input id="siteId" name="siteId" class="layui-input" type="number" lay-verify="required|number" autocomplete="off" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="form-label" for="workNo">工作号:</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" for="staNo">目标站:</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" for="pakMk">入库标记:</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 type="button" class="form-button" id="save">保存</button>
                        <button type="button" class="form-button" id="cancel" style="background-color: #D0D0D0;">取消</button>
                    </div>
                </form>
            </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 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>
</body>
<script>
    // 初始化
    // 空白行数
    var plcErrorTableBlankRows = 0;
    var siteTableBlankRows = 0;
    // 实际行数
    var plcErrorTableFullRows = 0;
    var siteTableFullRows = 0;
    var outputDom = document.getElementById("output");
    $(document).ready(function() {
        initPlcErrorTable();
        getPlcError();
        initSiteTable();
        getSite();
    });
    // 实时访问
    setInterval(function () {
        getPlcError();
        getSite();
    }, 1000);
    setInterval(function () {
        getSiteOutput();
    },500);
    // 自执行函数表达式,避免全局变量污染
    (function() {
        // 初始化变量
        let isSiteUpdatePaused = false;
        let plcErrorTableBlankRows = 0;
        let siteTableBlankRows = 0;
        let plcErrorTableFullRows = 0;
        let siteTableFullRows = 0;
        const outputDom = document.getElementById("output");
        let ioModeData = [];
        let layerDetl = null;
        let timers = [];
        // DOM加载完成后初始化
        $(document).ready(function() {
            // 初始化表格
            initPlcErrorTable();
            initSiteTable();
            // 加载初始数据
            getPlcError();
            getSite();
            // 初始化定时器
            initTimers();
        });
        // 初始化定时器
        function initTimers() {
            // 每秒更新PLC错误、站点信息和IO模式
            timers.push(setInterval(() => {
                getPlcError();
                if (!isSiteUpdatePaused) {
                    getSite();
                }
                getIoModeInfo();
            }, 1000));
            // 每500毫秒更新站点输出日志
            timers.push(setInterval(() => {
                getSiteOutput();
            }, 500));
        }
    // 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);
        /**
         * 强制切换入出库模式
         * @param {string} el - 元素ID
         */
        function ioModeSwitch(el) {
            const floor = el.split("-")[2];
            const targetFloor = ioModeData.find(e => e.floor === Number(floor));
            if (targetFloor && (targetFloor.modeVal === 3 || targetFloor.modeVal === 4)) {
                layer.confirm('确定切换为入库模式吗?', () => {
                    ajaxRequest({
                        url: `${baseUrl}/site/io/mode/action/site`,
                        method: 'POST',
                        data: { floor: targetFloor.floor },
                        success: (res) => {
                            layer.msg("暂时不能切换!", { icon: 1 });
                        }
                    });
                    layer.closeAll();
                });
            }
        }
        // 获取PLC异常信息表
        function getPlcError() {
            const tableEl = $('#plc-error-table');
            tableEl.children("tr").children("td").html("");
            ajaxRequest({
                url: `${baseUrl}/site/table/plc/errors`,
                method: 'POST',
                success: (res) => {
                    if (res.data) {
                        const tableData = res.data;
                        for (let i = 0; i < tableData.length; i++) {
                            const tr = tableEl.find("tr").eq(i + 1);
                            tr.children("td").eq(0).html(tableData[i].no);
                            tr.children("td").eq(1).html(tableData[i].plcDesc);
                            tr.children("td").eq(2).html(tableData[i].error);
                        }
                    }
                } else if (res.code === 403){
                    top.location.href = baseUrl+"/login";
                }  else {
                }
            });
        }
        // 获取站点信息表
        function getSite() {
            const tableEl = $('#site-table');
            ajaxRequest({
                url: `${baseUrl}/site/table/site`,
                method: 'POST',
                success: (res) => {
                    if (res.data) {
                        const tableData = res.data;
                        if (tableData.length > siteTableBlankRows && tableData.length !== siteTableFullRows) {
                            initSiteTable(tableData.length - siteTableBlankRows);
                            siteTableFullRows = tableData.length;
                        }
                        for (let i = 0; i < tableData.length; i++) {
                            const tr = tableEl.find("tr").eq(i + 1);
                            setVal(tr.children("td").eq(0), tableData[i].devNo);
                            setVal(tr.children("td").eq(1), tableData[i].workNo);
                            setVal(tr.children("td").eq(2), tableData[i].autoing);
                            setVal(tr.children("td").eq(3), tableData[i].loading);
                            setVal(tr.children("td").eq(4), tableData[i].inEnable);
                            setVal(tr.children("td").eq(5), tableData[i].outEnable);
                            setVal(tr.children("td").eq(6), tableData[i].pakMk);
                            setVal(tr.children("td").eq(7), tableData[i].emptyMk);
                            setVal(tr.children("td").eq(8), tableData[i].staNo);
                            setVal(tr.children("td").eq(9), tableData[i].locType1);
                        }
                    }
                }
            });
        }
        // 获取输送设备日志输出
        function getSiteOutput() {
            ajaxRequest({
                url: `${baseUrl}/site/output/site`,
                method: 'POST',
                success: (res) => {
                    if (res.data) {
                        output(res.data);
                    }
                },
                error: (res) => {
                    alert(res.msg);
                }
            });
        }
        // 日志输出框
        function output(content) {
            outputDom.value += content;
            outputDom.scrollTop = outputDom.scrollHeight;
        }
        // PLC异常空白表格渲染
        function initPlcErrorTable(row) {
            let line;
            if (row === undefined) {
                const one = $('#plc-error-table thead').height();
                const total = $('.plc-log-body').height();
                const count = parseInt(total / one) - 1;
                plcErrorTableBlankRows = count;
                line = count;
            } else {
                line = row;
            }
            let html = "";
            for (let i = 0; i < line; i++) {
                html += ` <tr>
                           <td></td>
                           <td></td>
                           <td></td>
                         </tr>`;
            }
            $('#plc-error-table tbody').after(html);
        }
        // 站点空白表格渲染
        function initSiteTable(row) {
            let line;
            if (row === undefined) {
                const one = $('#site-table thead').height();
                const total = $('#site-monitor').height();
                const count = parseInt(total / one) - 1;
                siteTableBlankRows = count;
                line = count;
            } else {
                line = row;
            }
            let html = "";
            for (let i = 0; i < line; i++) {
                html += ` <tr>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                         </tr>`;
            }
            $('#site-table tbody').after(html);
        }
        // 详情操作
        $(document).on('dblclick', '#site-table tr', function() {
            isSiteUpdatePaused = true;
            const siteId = $(this).children("td").eq(0).html();
            if (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: (layero, index) => {
                        http.get(`${baseUrl}/site/detl/${siteId}`, null, (res) => {
                            if (res.data) {
                                $('#siteId').val(siteId);
                                $('#workNo').val(res.data.workNo);
                                $('#staNo').val(res.data.staNo);
                                $('#pakMk').val(res.data.pakMk);
                            }
                        });
                    },
                    end: () => {
                        $('#siteId').val("");
                        $('#workNo').val("");
                        $('#staNo').val("");
                        $('#pakMk').val("");
                        isSiteUpdatePaused = false;
                    }
                });
            }
        });
    }
    // 站点信息表获取
    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].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);
                    }
                } else if (res.code === 403){
                    top.location.href = baseUrl+"/login";
                }  else {
                    alert(res.msg);
                }
            }
        // 保存站点信息
        $(document).on('click', '#save', function() {
            http.post(`${baseUrl}/site/detl/update`, {
                siteId: $('#siteId').val(),
                workNo: $('#workNo').val(),
                staNo: $('#staNo').val(),
                pakMk: $('#pakMk').val()
            }, (res) => {
                layer.msg("修改成功", { icon: 1 });
            });
        });
    }
    // 输送设备日志输出
    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) {
                    top.location.href = baseUrl + "/login";
                } else {
                    alert(res.msg);
        // 取消站点信息修改
        $(document).on('click', '#cancel', function() {
            $('#siteId').val("");
            $('#workNo').val("");
            $('#staNo').val("");
            $('#pakMk').val("");
            layer.close(layerDetl);
        });
        // 通用AJAX请求函数
        function ajaxRequest(options) {
            const defaultOptions = {
                headers: { 'token': localStorage.getItem('token') },
                success: () => {},
                error: () => {}
            };
            const opts = { ...defaultOptions, ...options };
            $.ajax({
                url: opts.url,
                headers: opts.headers,
                method: opts.method,
                data: opts.data,
                success: (res) => {
                    if (res.code === 200) {
                        opts.success(res);
                    } else if (res.code === 403) {
                        window.location.href = `${baseUrl}/login`;
                    } else {
                        console.log(res.msg);
                        //opts.error(res);
                    }
                },
                error: (jqXHR, textStatus, errorThrown) => {
                    console.error('AJAX Error:', textStatus, errorThrown);
                    //opts.error({ 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);
    }
    })();
</script>
</html>