@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
 
<style>
     .ui-jqgrid tr.jqgrow td {
        overflow:hidden;
    }
    .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
        overflow:hidden !important;
    }
    .btn-primary {
        margin-right: 2px;
    }
  
    html {
        height: 100%;
    }

    
      .formdiv  {
            height: 100% !important;  
         margin-bottom:2px;
         margin-top: 10px; margin-left: 10px; margin-right: 10px;
    }
    
    .form {
        margin-bottom:6px;
    }
        html  ,body  {
       height: 100% !important;  
       }
    form  {
        height: 98% !important;  
    }
    .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        height:20px !important;
    }
    .gridPanel {
        padding-left:2px;
        padding-right:2px;
        padding-bottom:4px;
    }
      /*表标题颜色*/
    .table > thead:first-child > tr:first-child > th {
         background-color: #229594 ;
         color:white;
    }
     /*表标题位置*/
    .ui-jqgrid .ui-jqgrid-caption {
        text-align:center; 
    }
    .ui-jqgrid .ui-jqgrid-title {
        font-size:20px;
    }
</style>
<link href="~/Content/css/CommonReport/CommonReport.css" rel="stylesheet" />
<script src="~/Content/js/CommonReport/CommonReport.js"></script>
<script src="~/Content/js/datepicker/WdatePicker.js"></script>
<link href="~/Content/css/bootstrap/bootstrap-select.css" rel="stylesheet" />
<script src="~/Content/js/bootstrap/bootstrap-select.min.js"></script>

<script>
 
    var HeightToDel = 80;
 
    var timer;
    var timer2;//刷新数据时间
    var GunDongRate = 20*1000;//单位毫秒 //滚动间隔时间
    var GunDongRow = 0;
    var DataF = 70;//单位s
    // var CurrentscrollTop = 0;
    var IsFirstShow = false;
 
 
    var TopdivMO = 129;
   
    $(function () {
       
        changeShow();

        $(window).resize(function () {

            $("#gridList1").setGridWidth($("#form1").width() * 0.49);
            $("#gridList1").setGridHeight($("#form1").height() * 0.50 - HeightToDel); 

            $("#gridList2").setGridWidth($("#form1").width() * 0.49);
            $("#gridList2").setGridHeight($("#form1").height() * 0.50 - HeightToDel);  

            $("#gridList3").setGridWidth($("#form1").width() * 0.49);
            $("#gridList3").setGridHeight($("#form1").height() * 0.50 - HeightToDel);  

            $("#gridList4").setGridWidth($("#form1").width() * 0.49);
            $("#gridList4").setGridHeight($("#form1").height() * 0.50 - HeightToDel); 
             

            GunDongRow = 0;
        });

        scrollBody("gridList1");
        scrollBody("gridList2");
        scrollBody("gridList3");
        scrollBody("gridList4");

        //刷新数据
        timer2 = setInterval(function () {
            gridList1();
            gridList2();
            gridList3();
            gridList4();
        }, DataF * 1000);
 
        
    });


   


    //自动滚动
    function scrollBody(gridList) {


        timer = setInterval(function () {
            var ob3 = $('#' + gridList).getGridParam("records");
            var div = $('#' + gridList).closest('.ui-jqgrid-bdiv')[0];
            var offsetHeight = div.offsetHeight;
            var scrollHeight = div.scrollHeight - offsetHeight;
            if (GunDongRow == 0) {
                var hh = offsetHeight;
                GunDongRow = Math.floor(hh / 30.3);
            }

            // div.scrollTop = div.scrollTop + 1;
            if (div.scrollTop >= scrollHeight) {//循环滚动
                scrollHeight = div.scrollHeight - offsetHeight;//如果在滚动过程中添加过数据，需要重新结算scrollHeight
                if (div.scrollTop >= scrollHeight) {
                    div.scrollTop = 0; //循环滚动，重置滚动头即可
                    IsFirstShow = true;
                }
                if (div.scrollTop >= ob3 * 30.4) {
                    div.scrollTop = 0; //循环滚动，重置滚动头即可
                    IsFirstShow = true;
                }
            }
            if (!IsFirstShow) {
                div.scrollTop = div.scrollTop + (GunDongRow * 30.3);
            }
            else { IsFirstShow = false; }

        }, GunDongRate);

    }


     

    //end 自动滚动

    function GetAllCols1() {
     var   _cols = new Array();
        //_cols.push({ label: '序号', name: '序号', width: 90, align: 'left', });
        _cols.push({ label: '到货单号', name: '到货单', width: 80, align: 'left', });
        _cols.push({ label: '订单号', name: '订单号', width: 80, align: 'left', });
        _cols.push({ label: '料号', name: '料号', width: 70, align: 'left', });
        _cols.push({ label: '物料名称', name: '物料名称', width: 130, align: 'left', });
        _cols.push({ label: '收货数量', name: '收货数量', width: 60, align: 'left', });
        _cols.push({ label: '已检数量', name: '已检数量', width: 60, align: 'left', });
        _cols.push({ label: '待检数量', name: '待检数量', width: 60, align: 'left', });
        _cols.push({ label: '已检待入', name: '已检待入', width: 60, align: 'left', });
        _cols.push({ label: '已入库数量', name: '已入库数量', width: 75, align: 'left', });//hidden: true,
        _cols.push({ label: '状态', name: '状态', width: 50, align: 'left',  });
         
        return _cols;
    }
    function GetAllCols2() {
        var _cols = new Array();
        //到货单	料号	条码	物料名称	采购订单号 型号	不合格数量	不良原因


        _cols.push({ label: '到货单', name: '到货单', width: 70, align: 'left', }); 
        _cols.push({ label: '料号', name: '料号', width: 70, align: 'left', });
        _cols.push({ label: '条码', name: '条码', width: 80, align: 'left', });
        _cols.push({ label: '物料名称', name: '物料名称', width: 130, align: 'left', }); 
        _cols.push({ label: '采购订单号', name: '采购订单号', width: 80, align: 'left', });
        _cols.push({ label: '型号', name: '型号', width: 60, align: 'left', });
        _cols.push({ label: '不合格数量', name: '不合格数量', width: 80, align: 'left', });
        _cols.push({ label: '不良原因', name: '不良原因', width: 80, align: 'left', });//hidden: true, 
 
        return _cols;
    }

    function GetAllCols3() {
        var _cols = new Array();
        //出库单号	产品编号	业务类型	需求部门	所属仓库	生产工单号	项目号	制单人	
        //制单日期	审核人	完成日期	状态

        _cols.push({ label: '出库单号', name: '出库单号', width: 80, align: 'left', });
        _cols.push({ label: '产品编号', name: '产品编号', width: 80, align: 'left', });
        _cols.push({ label: '业务类型', name: '业务类型', width: 80, align: 'left', });
        _cols.push({ label: '需求部门', name: '需求部门', width: 80, align: 'left', });
        _cols.push({ label: '所属仓库', name: '所属仓库', width: 80, align: 'left', });
        _cols.push({ label: '生产工单号', name: '生产工单号', width: 80, align: 'left', });
        _cols.push({ label: '项目号', name: '项目号', width: 65, align: 'left', });
        _cols.push({ label: '制单人', name: '制单人', width: 65, align: 'left', });
        _cols.push({ label: '制单日期', name: '制单日期', width: 90, align: 'left', });//hidden: true,
        _cols.push({ label: '审核人', name: '审核人', width: 65, align: 'left', });
        _cols.push({ label: '完成日期', name: '完成日期', width: 90, align: 'left', });
        _cols.push({ label: '状态', name: '状态', width: 50, align: 'left', });
       
 
        return _cols;
    }

    function GetAllCols4() {
        var _cols = new Array();
        //到货单	料号	条码	物料名称	采购订单号	型号	入库数量	库位 
        _cols.push({ label: '到货单', name: '到货单', width: 80, align: 'left', }); 
        _cols.push({ label: '料号', name: '料号', width: 80, align: 'left', }); 
        _cols.push({ label: '条码', name: '条码', width: 70, align: 'left', });
        _cols.push({ label: '物料名称', name: '物料名称', width: 130, align: 'left', });
        _cols.push({ label: '采购订单号', name: '采购订单号', width: 70, align: 'left', });
        _cols.push({ label: '型号', name: '型号', width: 70, align: 'left', });
        _cols.push({ label: '入库数量', name: '入库数量', width: 70, align: 'left', });
        _cols.push({ label: '库位', name: '库位', width: 70, align: 'left', });//hidden: true,
        
         
        return _cols;
    }

   

    function gridList1() {
        document.getElementById("gridPanel1").innerHTML = ' <table id="gridList1"></table>    ';//重置grid
        var _cols = GetAllCols1();
        var $gridList = $("#gridList1" );
     
        var queryJson = { 
        }
        $gridList.dataGrid({
            url: "/SRM/WatchPanel/GetGridJson1?" + Math.random(),
            postData: { queryJson: JSON.stringify(queryJson) },
            height: $(window).height() * 0.50 - HeightToDel,
            colModel: _cols,
            caption: '到货明细',
            sortname: "  状态,到货单号,订单号,  料号 ",
            rowNum: 5000,
            viewrecords: true,
            rownumbers: true,
            multiselect: false,  
            gridComplete: function () { 
                $("#gridList1"  ).jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
            }
        });  
    }

    function gridList2() {
        document.getElementById("gridPanel2").innerHTML = ' <table id="gridList2"></table>    ';//重置grid
        var _cols = GetAllCols2();
        var $gridList = $("#gridList2");

        var queryJson = {
        }
        $gridList.dataGrid({
            url: "/SRM/WatchPanel/GetGridJson2?" + Math.random(),
            postData: { queryJson: JSON.stringify(queryJson) },
            height: $(window).height() * 0.50 - HeightToDel,
            colModel: _cols,
            caption:"来料不合格明细",
            sortname: " 到货单, 采购订单号, 料号  ",
            rowNum: 5000,
            viewrecords: true,
            rownumbers: true,
            multiselect: false,
            gridComplete: function () {
                $("#gridList2").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
            }
        });
    }

    function gridList3() {
        document.getElementById("gridPanel3").innerHTML = ' <table id="gridList3"></table>    ';//重置grid
        var _cols = GetAllCols3();
        var $gridList = $("#gridList3");

        var queryJson = {
        }
        $gridList.dataGrid({
            url: "/SRM/WatchPanel/GetGridJson3?" + Math.random(),
            postData: { queryJson: JSON.stringify(queryJson) },
            height: $(window).height() * 0.50 - HeightToDel,
            colModel: _cols,
            caption:"配料信息表",
             sortname: " 状态,制单日期,出库单号,产品编号  ",
            rowNum: 5000,
            viewrecords: true,
            rownumbers: true,
            multiselect: false,
            gridComplete: function () {
                $("#gridList3").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
            }
        });
    }

    function gridList4() {
        document.getElementById("gridPanel4").innerHTML = ' <table id="gridList4"></table>    ';//重置grid
        var _cols = GetAllCols4();
        var $gridList = $("#gridList4");

        var queryJson = {
        }
        $gridList.dataGrid({
            url: "/SRM/WatchPanel/GetGridJson4?" + Math.random(),
            postData: { queryJson: JSON.stringify(queryJson) },
            height: $(window).height() * 0.50 - HeightToDel,
            colModel: _cols,
            caption:"入库明细",
            sortname: " 到货单, 采购订单号, 料号  ",
            rowNum: 5000,
            viewrecords: true,
            rownumbers: true,
            multiselect: false,
            gridComplete: function () {
                $("#gridList4").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
            }
        });
    }
     
    
     
    function changeShow()
    {
        gridList1();
        gridList2();
        gridList3();
        gridList4();
    }


</script>



<form id="form1">
    <div class="formdiv">
        <table class="form">
            <tr style="width:100%;height:50%;">
                <td  >
                    <div class="gridPanel" id="gridPanel1">
                        <table id="gridList1"></table>

                    </div>
                </td>
                <td  >
                    <div class="gridPanel" id="gridPanel2">
                        <table id="gridList2"></table>

                    </div>
                </td>
            </tr>
            <tr style="width:100%;height:50%;">
                <td  >
                    <div class="gridPanel" id="gridPanel3">
                        <table id="gridList3"></table>

                    </div>
                </td>
                <td  >

                    <div class="gridPanel" id="gridPanel4">
                        <table id="gridList4"></table>

                    </div>
                </td>
            </tr>

        </table>

    </div>
   

</form>