#

vincent

2020-06-02 c350b737713fe518c22036dfc9a2574bcafcb15c

 src/main/webapp/views/pipeline.html

@@ -10,65 +10,8 @@
    <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/layer/layer.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <style>
        .plc-log-header {
            height: 15%;
        }
        .plc-log-body {
            height: 85%;
            overflow: auto;
        }


        /* 站点表格 */
        #site-table {
            font-size: 12px;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        #site-table td, #site-table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 25px;
        }
        #site-table thead th {
            background-color: #CCE8EB;
            width: 100px;
        }
        #site-table tr:nth-child(odd) {
            background: #fff;
        }
        #site-table tr:nth-child(even) {
            background: #F5FAFA;
        }



        /* plc异常表格 */
        #plc-error-table {
            font-size: 12px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        #plc-error-table td, #plc-error-table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 25px;
            text-align: left;
            padding-left: 5px;
        }
        #plc-error-table thead th {
            background-color: #CCE8EB;
            width: 100px;
        }
        #plc-error-table tr:nth-child(odd) {
            background: #fff;
        }
        #plc-error-table tr:nth-child(even) {
            background: #F5FAFA;
        }

    </style>
</head>
@@ -78,16 +21,18 @@
    <div id="plc-error" class="main-board" style="padding-left: 10px">
        <!-- 头部 -->
        <div class="plc-log-header">
            <div style="height: 50%">
            <div style="height: 40%">
                <span>东侧PLC执行指令</span>
            </div>
            <div style="height: 50%">
            <div style="height: 40%">
                <span>西侧PLC执行指令</span>
            </div>
            <div>
                <span style="color: #1E9FFF">PLC异常信息表:</span>
            </div>
        </div>
        <!-- 主体 -->
        <div class="plc-log-body">
            <span>PLC异常信息</span>
            <table id="plc-error-table">
                <thead>
                    <tr>
@@ -97,71 +42,7 @@
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>23532</td>
                        <td>PLC错误描述PLC错误描述1</td>
                        <td>异常异常异常异常异常异常异常</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

                </tbody>
            </table>
        </div>
@@ -187,344 +68,7 @@
                </tr>
            </thead>
            <!-- 表格内容 -->
            <tbody>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>2223</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>Y</td>
                    <td>N</td>
                    <td>1</td>
                    <td>1204</td>
                </tr>
            </tbody>
            <tbody></tbody>
        </table>
    </div>
</main>
@@ -533,15 +77,183 @@
</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);


    // 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){
                    top.location.href = baseUrl+"/login";
                }  else {
                    alert(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].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);
                }
            }
        });
    }

    // 输送设备日志输出
    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);
                }
            }
        })
    }

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

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

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