<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>

<style type="text/css">

    .modal-body {
        position: relative;
        padding: 15px;
        height: 360px;
        overflow-y: scroll;
    }

    .label-alarm{
        color: white;
        background-color: #df4441 !important;
        border-color: #df6821 !important;
    }

    .task-content{
        /*width: 800px;*/
    }


</style>
<!-- BEGIN PAGE HEADER-->
<%--<h3 class="page-title">--%>
    <%--<fmt:message key="异常看板"/>--%>
<%--</h3>--%>


<div class="clearfix">
</div>
<div class="row ">
    <!--任务 -->
    <div class="col-md-4 col-sm-4">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-list"></i>任务
                </div>
            </div>
            <div class="portlet-body" style="height:713px;overflow: auto;">
                <div class="task-content">
                    <ul class="feeds" id="task">
                    </ul>
                </div>
                <%--<div class="task-footer">--%>
                    <%--<div class="btn-arrow-link pull-right">--%>
                        <%--<a href="${ctx}/workOrder/feederSearch.html">more</a>--%>
                        <%--<i class="icon-arrow-right"></i>--%>
                    <%--</div>--%>
                <%--</div>--%>
            </div>
        </div>
    </div>
    <!--温度 -->
    <div class="col-md-4 col-sm-4">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-list"></i>料仓
                </div>
            </div>
            <div class="portlet-body" style="height:300px;overflow: auto;">
                <div class="task-content">
                    <ul class="feeds" id="box">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--流水线-->
    <div class="col-md-4 col-sm-4">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-list"></i>流水线
                </div>
            </div>

            <div class="portlet-body" style="height:300px;overflow: auto;">
                <div class="task-content">
                    <ul class="feeds" id="line">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--双层线-->
    <div class="col-md-4 col-sm-4">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-list"></i>双层线
                </div>
            </div>

            <div class="portlet-body" style="height:300px;overflow: auto;">
                <div class="task-content">
                    <ul class="feeds" id="doubleLine">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--AGV-->
    <div class="col-md-4 col-sm-4">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-list"></i>AGV
                </div>
            </div>

            <div class="portlet-body" style="height:300px;overflow: auto;">
                <div class="task-content">
                    <ul class="feeds" id="agv">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>



<fmt:message key="boxView.taskCancel" var="taskCancel_label"/>
<fmt:message key="boxView.taskExcuting" var="taskExcuting_label"/>
<fmt:message key="boxView.taskFinished" var="taskFinished_label"/>
<fmt:message key="boxView.taskWaiting" var="taskWaiting_label"/>
<fmt:message key="boxView.cancelTask" var="cancelTask_label"/>

<fmt:message key="inOutList.in" var="in_label"/>
<fmt:message key="inOutList.out" var="out_label"/>
<fmt:message key="dataLog.orderSource" var="source_label"/>


<c:set var="scripts" scope="request">
    <script type="text/javascript">
        $(document).ready(function(){
            function flushMsgs(){
                var msgMap = {};
                $.get('${ctx}/rest/api/qisda/device/deviceMsgList', function (list) {

                    for(var i in list){
                        var msgBean = list[i];
                        var msgKey = msgBean.msgKey;
                        var documentId = msgKey.split(".")[0];
                        var msgItem = "<li>" +
                                "<span class='task-title-sp'>["+msgBean.name+"]</span>" +
                                "<span class='label label-sm label-alarm'>" +
                                msgBean.msgValue +"</span>" +
                                "</li>";
                        var html = msgMap[documentId];
                        if(!html){
                            html = "";
                        }
                        msgMap[documentId] = html + msgItem;
                    }

                    var allBox = $(".feeds");
                    allBox.each(function(index){
                        var documentId = $(this).attr("id");
                        if(documentId != "task"){
                            var html = msgMap[documentId];
                            if(!html){
                                html = "";
                            }
                            $(this).html(html);
                        }


                    });

                });
            }

            function updateTasks(){
                //任务列表
                $.post("${ctx}/service/store/tasks", {}, function (data) {
                    var html = "";
                    for(var item in data){
                        if(!data[item].timeout){
                            continue;
                        }
                        var partNumber = data[item].partNumber;
                        var barcode = data[item].barcode
                        //入库
                        var showStr = barcode + "["+partNumber+"]${in_label}";

                        var status = data[item].status.toLowerCase();
                        if(data[item].type == 2){//出库
                            showStr =  barcode + "["+partNumber+"]${out_label}";
                        }

                        var showClass = 'label-'+status;
                        var statusMsg ="["+status+"]";

                        if(data[item].cancel){
                            statusMsg ="[${taskCancel_label}]";
                        } else if(data[item].executing){
                            statusMsg ="[${taskExcuting_label}]";
                        }else if(data[item].finished){
                            statusMsg ="[${taskFinished_label}]";
                        }else if(data[item].wait){
                            statusMsg ="[${taskWaiting_label}]";
                        }

                        var sourceStr = "";
                        if(data[item].sourceName){
                            sourceStr = "<br/>${source_label} " + data[item].sourceStr;
                        }
                        var msgValue = showStr + statusMsg + sourceStr;

                        var msgItem = "<li><span class='task-title-sp'>" +
                                "[" + data[item].posName + "] </span>" +
                                "<span class='label label-sm label-alarm'>"+msgValue+"</span>" +
                                "</li>";
                        html = html + msgItem;
                    }
                    $("#task").html(html);
                });
            }

            setInterval(function(){
                flushMsgs();
                updateTasks();
            }, 1000);
        });
    </script>
</c:set>