OMAY_WMS/KanBan/NFine.Web/Areas/SRM/Views/WatchPanel/PanelWareHouseNew.cshtml

@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
 <script src="~/Content/js/echarts/echarts5.3.3.min.js"></script>

<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>
<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%;
    } 
      
    
    .form {
        
        background-color:black;
    }
        html  ,body  {
       height: 100% !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;
    }
      .echartDiv {
        height:100%;
        width:100%;
        /*padding-top:10px;*/
        /*margin-bottom:5px;*/
    }

    .nav-tabs > li {
        float:right;
    }
    .nav > li > a {
        padding:4px 10px;
    }
    .tab-content {
        height: calc( 100% - 20px );
    }
    .tab-pane, .echartDivOut {
        height:100%
    }

   
    body {
        
        /*FONT-SIZE: 18px;*/
        background-color:black;

         --CustTitlecolor: #0bd4d4;/*表标题颜色*/ /*#4D5457 #000000bf*/
          --Custbackgroundcolor: #031c7bc2; /*#031c7b;*/ /*表整体颜色*/ 
           --CustSelect: #103764;  /*选中颜色*//*悬浮颜色*/
           --Custcolor: white;/*字体颜色*/
            --CustBorderColor: #031c7bc2;/*边框颜色*/
             --CustRow1: #0e59a5d4;/*偶行颜色*/
              --CustRow2: #031c7bc2;/*奇行颜色*/
    }

     .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        background-color:var(--Custbackgroundcolor) ;
        color:white;
    }

        .nav-tabs > li > a  { 
        color:white;
    }
    /*大标题*/
    .TopName {
        vertical-align: middle;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        /*color:var(--CustTitlecolor);*/
        color:white;
    }
    /*logo标题*/
    .TopNamelogo{
        vertical-align: middle;
        text-align: left;
        font-size: 24px;
        font-weight: 700; 
        color:white;
    }
      .logoclass { 
        height:24px; 
    }
    #logolabel {
        /*width:80%;*/ 
    }
     .time {
        vertical-align: middle;
        text-align: center;
        font-size: 20px;
        /*color:var(--CustTitlecolor);*/
        color:white;
    } 
    td {
        /*padding-bottom:1px; 
        padding-left:1px;
         padding-right:1px;*/ 
    }
    .ui-jqgrid .ui-jqgrid-titlebar,unwritten, .ui-jqgrid .table-bordered,.ui-jqgrid .ui-jqgrid-hdiv{
        border:none !important;
    }
    .formdiv {
        height: 100% !important;
         
        margin-left: 0px;
        margin-right: 0px;
    }

    .thclass {
        width: 100px;
        font-weight: 500;
        text-align: right;
    }

    table {
        height: 100%;
    }
 

    form {
        height: 100% !important;
        background-color: black;
    }
    .echartDiv {
        height:100%;
        width:100%;
    }
    /*表标题颜色*/
    .ui-jqgrid .ui-jqgrid-title {
        color:var(--CustTitlecolor);
    }

     /*表列表头颜色*/
    .table > thead:first-child > tr:first-child > th {
         background-color: var(--Custbackgroundcolor) ;
         color:var(--CustTitlecolor);
    }
      /*表整体颜色*/
     .ui-jqgrid {
          background-color: var(--Custbackgroundcolor);
         color:var(--Custcolor);
        /*border: 1px solid  var(--CustBorderColor);*/
        border:none;
        
    }
        .ui-jqgrid .table-bordered td {
             /*border: 0.5px solid  var(--CustBorderColor);*/
             border:none;
             border-left:none;
             border-right:none;
             
        }

    /*悬浮颜色*/
    .table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,
    .table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,
    .table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,
    .table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active
    {
        background-color:var(--CustSelect) ;
           color:var(--Custcolor);   
    }
    
    /*选中颜色*/
    .table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,
    .table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,
    .table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,
    .table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success
    {
         background-color:var(--CustSelect) ;
           color:var(--Custcolor);
    }
    /*偶行颜色*/
    div>div>div>table>tbody>tr:nth-child(2n) {
        background-color: var(--CustRow1);
        color:white;
         border:none;
    }
    /*奇行颜色*/
 div>div>div>table>tbody>tr:nth-child(2n+1) {
        background-color:var(--CustRow2);
        color:white;
        border:none;
    }

    form > div > table > tbody > tr>td {
         
         padding-bottom:5px;
        padding-top:5px;
        padding-left:5px;
        padding-right:5px; 
    }
    ::-webkit-scrollbar-thumb {
        background-color:var(--CustTitlecolor);
    }

</style>


<script>
 
    var HeightToDel = 64;
    var TBBackColor = "#031c7bc2";
    var TBTitleFontColor = "#0bd4d4";
    var timer;
    var timer2;
    var GunDongRate = 2*1000;//单位毫秒 //表格滚动间隔时间
    var GunDongRow = 0;
    var DataF = 300;//单位秒 //刷新数据时间
    // var CurrentscrollTop = 0;
    var IsFirstShow = false;
    var currentDaoHuoQty_type = "日";
    var currentRuKuQty_type = "日";
    var currentPLXX_type = "未完成";
 
    //var TopdivMO = 129;
   
    $(function () {
        //显示时间
        getTime();
        changeShow();
      
 
        $(window).resize(function () {
        
            //$("#gridList1").setGridWidth($("#gridPanel1").width()  );
            //$("#gridList1").setGridHeight($(window).height() * 0.31 - HeightToDel);

            //$("#gridList2").setGridWidth($("#gridPanel1").width()  );
            //$("#gridList2").setGridHeight($(window).height() * 0.31 - HeightToDel);

            //$("#gridList3").setGridWidth($("#gridPanel3").width()  );
            //$("#gridList3").setGridHeight($(window).height() * 0.29 - HeightToDel);

            //$("#gridList4").setGridWidth($("#gridPanel4").width()  );
            //$("#gridList4").setGridHeight($(window).height() * 0.29 - HeightToDel);
            changeShow();
            GunDongRow = 0;
          
        });

         scrollBody("gridList1");
        scrollBody("gridList2");
        scrollBody("gridList3");
        scrollBody("gridList4");
        //$('#myTab li:eq(0) a').tab('show');


      //  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $('.Tab1Class').on('shown.bs.tab', function (e) {
            
            // 获取已激活的标签页的名称
            var activeTab = $(e.target).text();
            // 获取前一个激活的标签页的名称
            var previousTab = $(e.relatedTarget).text();
           // $(".active-tab span").html(activeTab);
            // $(".previous-tab span").html(previousTab);
            currentDaoHuoQty_type = activeTab;
            SetPanel3();
        });

        $('.Tab2Class').on('shown.bs.tab', function (e) {
             
            var activeTab = $(e.target).text(); 
            var previousTab = $(e.relatedTarget).text(); 
            currentRuKuQty_type = activeTab;
            SetPanel4();
        });

        $('.Tab3Class').on('shown.bs.tab', function (e) {

            var activeTab = $(e.target).text();
            var previousTab = $(e.relatedTarget).text();
            currentPLXX_type = activeTab;
            gridList3();
        });
        

        //刷新数据
        timer2 = setInterval(function () {
            changeShow();
        }, 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);
                GunDongRow =1;
            }

            // 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: 100, align: 'left', });
        _cols.push({ label: '订单号', name: '订单号', width: 120, align: 'left', });
        _cols.push({ label: '料号', name: '料号', width: 70, align: 'left', });
        _cols.push({ label: '物料名称', name: '物料名称', width: 160, align: 'left', });
        _cols.push({ label: '收货数量', name: '收货数量', width: 50, align: 'left', });
        _cols.push({ label: '已检数量', name: '已检数量', width: 50, align: 'left', });
        _cols.push({ label: '待检数量', name: '待检数量', width: 50, align: 'left', });
        _cols.push({ label: '已检待入', name: '已检待入', width: 50, align: 'left', });
        //_cols.push({ label: '已入库数量', name: '已入库数量', width: 75, align: 'left', });//hidden: true,
        _cols.push({ label: '状态', name: '状态', width: 40, align: 'left',  });
         
        return _cols;
    }
    function GetAllCols2() {
        var _cols = new Array();
        //到货单	料号	条码	物料名称	采购订单号 型号	不合格数量	不良原因


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

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

        _cols.push({ label: '出库单号', name: '出库单号', width: 110, 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: 80, align: 'left', });
        _cols.push({ label: '生产工单号', name: '生产工单号', width: 105, align: 'left', });
        //_cols.push({ label: '项目号', name: '项目号', width: 65, align: 'left', });
        _cols.push({ label: '制单人', name: '制单人', width: 60, align: 'left', });
        _cols.push({ label: '制单日期', name: '制单日期', width: 120, align: 'left', });//hidden: true,
        //_cols.push({ label: '审核人', name: '审核人', width: 65, align: 'left', });
        _cols.push({ label: '完成日期', name: '完成日期', width: 120, align: 'left', });
        _cols.push({ label: '状态', name: '状态', width: 50, align: 'left', });
       
 
        return _cols;
    }

    function GetAllCols4() {
        var _cols = new Array();
        //到货单	料号	条码	物料名称	采购订单号	型号	入库数量	库位 
        _cols.push({ label: '到货单', name: '到货单', width: 100, align: 'left', }); 
        _cols.push({ label: '料号', name: '料号', width: 80, align: 'left', });  
        _cols.push({ label: '物料名称', name: '物料名称', width: 200, align: 'left', });
        _cols.push({ label: '采购订单号', name: '采购订单号', width: 115, align: 'left', });
        //_cols.push({ label: '型号', name: '型号', width: 70, align: 'left', });
        _cols.push({ label: '待入库数量', name: '待入库数量', width: 70, align: 'left', });
        _cols.push({ label: '库位', name: '库位', width: 50, align: 'left', });
        _cols.push({ label: '条码', name: '条码', width: 90, 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: $(".formdiv").height() * 0.31  ,//($("#form1").height()-10)*0.31,//$(".formdiv").height() * 0.31-HeightToDel-6, 
            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: $(".formdiv").height() * 0.31 - 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 = {
            "type": currentPLXX_type,
        }
        $gridList.dataGrid({
            url: "/SRM/WatchPanel/GetGridJson3?" + Math.random(),
            postData: { queryJson: JSON.stringify(queryJson) },
            height: $(window).height() * 0.29 - HeightToDel - 24,
            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.29 - 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()
    {
      
        SetPanel1();
        SetPanel2();
        SetPanel3();
        SetPanel4();
        gridList1();
        gridList2();
        gridList3();
        gridList4();
        
        var ee = $(".formdiv").height() * 0.31; 
        var tt = $(".ui-jqgrid-titlebar")[0].clientHeight;
        var ff = $(".ui-jqgrid-hdiv")[0].clientHeight;
        $("#gridList1").setGridHeight(ee - tt - ff-20);
        $("#gridList2").setGridHeight(ee - tt - ff - 20);
        $("#gridList3").setGridHeight(ee - tt - ff - 20 - 24);
        $("#gridList4").setGridHeight(ee - tt - ff - 20);
    }


    //收货进度  
    function SetPanel1() {
        document.getElementById("TB1").innerHTML = '  <div id="panel1" class="echartDiv"></div>    ';//重置图
        var myChart = echarts.init(document.getElementById('panel1'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var colors = ['#91cc75', '#fac858', '#5470c6', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
      
        //['#4F81BD', '#fa9258', '#9d9b9b', '#FF0000', '#0080ff', '#7030A0'];

        var X_Show = new Array();// ['已检待入','优先待检', '待检'];
        var DataList = new Array();//[260, 36,152];
        var DataPercent = new Array();//['58%', '8%', '34%'];



        $.ajax({
            url: "/SRM/WatchPanel/GetRCVJingDu?" + Math.random(),
            data: { XX: "" },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        //QTY	CKTYPE	Qtypercent
                        X_Show.push(result[i].CKTYPE);
                        DataList.push(result[i].QTY);
                        DataPercent.push(result[i].Qtypercent);

                    }
                }
                else {
                     
                  //  alert("收货进度没有抓取到相关数据");
                    X_Show = ['已检待入', '优先待检', '待检'];
                    DataList = [0, 0, 0];
                }

                 
                    myChart.setOption({        //加载数据图表
                         color: colors,
                        title: {
                            show: true,
                            text: '收货进度（wk）',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        backgroundColor: TBBackColor,
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b},{c}' + '<br>' + '{d}%'
                        },
                        legend: {
                            textStyle: { color: colors, },
                            left: 'right',
                            orient: "vertical"
                        },
                        series: [
                          {

                              type: 'pie',
                             // radius: DataPercent,
                              avoidLabelOverlap: false,
                              label: {
                                  show: true,
                                  position: 'inside',
                                  formatter: ' {d}%'
                              },
                              radius: ['40%', '70%'],
                           
                              itemStyle: {
                                  borderRadius: 10,
                                  borderColor: TBBackColor,
                                  borderWidth: 2
                              },
                              labelLine: {
                                  show: false
                              },
                              data: [
                                { value: DataList[0], name: X_Show[0] },
                                   { value: DataList[1], name: X_Show[1] },
                                     { value: DataList[2], name: X_Show[2] },
                              ]
                          }
                        ]
                    });

                    myChart.hideLoading();    //隐藏加载动画
               
            },
            error: function (errorMsg) {
                alert("收货进度图表请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    //配料进度
    function SetPanel2() {
        document.getElementById("TB2").innerHTML = '  <div id="panel2" class="echartDiv"></div>    ';//重置图
        var myChart = echarts.init(document.getElementById('panel2'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画 

        var colors = ['#fac858', '#91cc75', '#5470c6', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
       // var colors = ['#ffff00', '#4F81BD', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];

        var X_Show = new Array();// ['待配料', '已配料'];
        var DataList = new Array();//[200, 372];
        var DataPercent = new Array();// ['35%', '65%'];



        $.ajax({
            url: "/SRM/WatchPanel/GetPeiLiaoJingDu?" + Math.random(),
            data: { XX: "" },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        //QTY	CKTYPE	Qtypercent
                        X_Show.push(result[i].cktype);
                        DataList.push(result[i].Qty);
                        DataPercent.push(result[i].Qtypercent);

                    }

                    //测试！！！！！
                //}
                //else
                //{
                //    X_Show =  ['待配料', '已配料'];
                //      DataList =  [200, 372];
                //      DataPercent =   ['35%', '65%'];
                //}
                //X_Show = ['待配料', '已配料'];
                //DataList = [200, 372];
                //DataPercent = ['35%', '65%'];

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            show: true,
                            text: '配料进度（mth)',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        color: colors,
                        backgroundColor: TBBackColor,
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b},{c}' + '<br>' + '{d}%'
                        },
                        legend: {
                            textStyle: { color: colors, },
                            left: 'right',
                            orient: "vertical"
                        },
                        series: [
                          {

                              type: 'pie',
                              radius: ['40%', '70%'],

                              itemStyle: {
                                  borderRadius: 10,
                                  borderColor: TBBackColor,
                                  borderWidth: 2
                              },
                              avoidLabelOverlap: false,
                              label: {
                                  show: true,
                                  position: 'inside',
                                  formatter: ' {d}%'
                              },
                              //emphasis: {
                              //    label: {
                              //        show: true,
                              //        fontSize: '40',
                              //        fontWeight: 'bold'
                              //    }
                              //},
                              labelLine: {
                                  show: false
                              },
                              data: [
                                { value: DataList[0], name: X_Show[0] },
                                   { value: DataList[1], name: X_Show[1] },
                              ]
                          }
                        ]
                    });


                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                   // alert("配料没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("配料图表请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    //到货数量(item)
    function SetPanel3() {
        document.getElementById("TB3").innerHTML = '  <div id="panel3" class="echartDiv"></div>    ';//重置图
        var myChart = echarts.init(document.getElementById('panel3'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];

        var QtyList = new Array();// [22, 36, 42, 52, 44, 3, 2,34,2,34,45,23,45,45,12,28,39,90,40,44,45];
        var MonthList = new Array();
        //for (var i = 29; i > 0 ; i--) {
        //    let nowDate = new Date();
        //    nowDate = nowDate.setDate(nowDate.getDate() - i);
        //    var dd = new Date(parseInt(nowDate));
        //    var DStr = (dd.getMonth() + 1).toString() + '/' + dd.getDate().toString();

        //    MonthList.push(DStr);
        //}


        $.ajax({
            url: "/SRM/WatchPanel/GetRCVQty?" + Math.random(),
            data: { type: currentDaoHuoQty_type },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    for (var i = 0; i < result.length; i++) {

                        QtyList.push(result[i].QTY);
                        MonthList.push(result[i].日期);

                    }

                    //测试！！！！！
                //}
                //else
                //{
                //    QtyList =   [22, 36, 42, 52, 44, 3, 2,34,2,34,45,23,45,45,12,28,39,90,40,44,45];
                //      MonthList = new Array();
                //     for (var i = 29; i > 0 ; i--) {
                //         let nowDate = new Date();
                //         nowDate = nowDate.setDate(nowDate.getDate() - i);
                //       var dd = new Date(parseInt(nowDate));
                //       var DStr = (dd.getMonth() + 1).toString() + '/' + dd.getDate().toString();

                //        MonthList.push(DStr);
                //     }
                //}
                  //  QtyList = [22, 36, 42, 52, 44, 3, 2, 34, 2, 34, 45, 23, 45, 45, 12, 28, 39, 90, 40, 44, 45];

                         // MonthList = new Array();
                         //for (var i = 29; i > 0 ; i--) {
                         //    let nowDate = new Date();
                         //    nowDate = nowDate.setDate(nowDate.getDate() - i);
                         //  var dd = new Date(parseInt(nowDate));
                         //  var DStr = (dd.getMonth() + 1).toString() + '/' + dd.getDate().toString();

                         //   MonthList.push(DStr);
                         //}
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            text: '到货数量(item)',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        color: colors,
                        legend: {
                            show: false,
                            textStyle: {
                               color: colors,
                            }
                        },

                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                var showHtm = "";
                                showHtm = params[0].name + ":" + params[0].data;
                                return showHtm;
                            }
                        },
                        backgroundColor: TBBackColor,

                        grid: {
                            show: false,
                            left: 70,
                            right: 30,
                            top: 60,
                            bottom: 30,
                        },
                        xAxis: {
                            axisTick: { show: false, },
                            data: MonthList, type: 'category',
                            axisPointer: { type: 'shadow' },
                            axisLine: {
                                lineStyle: {
                                    color: "white"
                                },
                            }
                        },
                        yAxis: [{

                            type: 'value', position: 'left',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "white"
                                },
                            },
                            splitLine: {
                                show: false
                            }
                        }
                        ],
                        series: [{
                            name: '数量',
                            type: 'line',
                            data: QtyList,
                            barMaxWidth: 10,
                            yAxisIndex: 0,
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#fffffff7' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#031c7b06' // 100% 处的颜色
                                    }],
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'top',
                                    color: 'white',
                                }

                            }
                        }

                        ]
                    });


                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                //    alert("到货数量没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("到货数量图表请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    //入库数量(item)
    function SetPanel4() {
        document.getElementById("TB4").innerHTML = '  <div id="panel4" class="echartDiv"></div>    ';//重置图
        var myChart = echarts.init(document.getElementById('panel4'));

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var colors = ['#4F81BD', '#fac858', '#1abc9c', '#FF0000', '#0080ff', '#7030A0'];

        var QtyList = new Array();// [22, 36, 42, 52, 44, 3, 2, 34, 2, 34, 45, 23, 45, 45, 12, 28, 39, 90, 40, 44, 45];
        var MonthList = new Array();
        var QtyYear = "";

        $.ajax({
            url: "/SRM/WatchPanel/GetWareInQty?" + Math.random(),
            data: { type: currentRuKuQty_type },
            dataType: "json",
            async: false,
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result && result != null && result.length > 0) {
                    QtyYear = result[0].QtyYear;
                    for (var i = 0; i < result.length; i++) {

                        QtyList.push(result[i].QTY);
                        MonthList.push(result[i].日期);

                    }

                    

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            text: '入库数量(item)',
                            textStyle: {
                                fontSize: 18,
                                color: TBTitleFontColor,
                            },
                        },
                        color: colors,
                        legend: {
                            show: false,
                            textStyle: {
                                color: "white"
                            }
                        },
                        //legend: {
                        //    formatter: function (name) {
                        //        return 'XXXX';
                        //    },

                        //    icon: "none",

                        //},
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                var showHtm = "";
                                showHtm = params[0].name + ":" + params[0].data;
                                return showHtm;
                            }
                        },
                        backgroundColor: TBBackColor,

                        grid: {
                            show: false,
                            left: 70,
                            right: 30,
                            top: 60,
                            bottom: 30,
                        },
                        xAxis: {
                            axisTick: {  show: false,},
                            data: MonthList, type: 'category',
                            axisPointer: { type: 'shadow' },
                            axisLine: {
                                lineStyle: {
                                    color: "white"
                                },
                            }
                        },
                        yAxis: [{

                            type: 'value', position: 'left',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "white"
                                },
                            },
                            splitLine: {
                                show: false
                            }
                        }
                        ],
                        series: [{
                            name: '数量',
                            type: 'line',
                            data: QtyList,
                            barMaxWidth: 10,
                            yAxisIndex: 0,
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#fffffff7' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#031c7b06' // 100% 处的颜色
                                    }],
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'top',
                                    color: 'white',
                                }

                            }
                        }

                        ]
                    });


                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                //    alert("入库数量没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("入库数量图表请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    function getTime() {
        var days = new Array("日", "一", "二", "三", "四", "五", "六");
        var currentDT = new Date();
        var y, m, date, day, hs, ms, ss, theDateStr;
        y = currentDT.getFullYear(); //四位整数表示的年份
        m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
        date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
        day = currentDT.getDay(); //星期
        hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
        ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
        ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
        theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
        //填充到组件中
        $("#timeStr").text(theDateStr);
        // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
        window.setTimeout(getTime, 1000);
    }

</script>



<form id="form1">
    <div class="formdiv">

        <table class="form" id="WTable" style="width:100%;height:100%;">
            <tr style="width:100%;height:10%;background-color:#031c7bc2;padding-bottom:5px">
                <td style="text-align:right;width:14%">
                    <label class="radio-inline" id="logolabel">
                        <img src="~/Content/img/Panellogo.png" border="0" class="logoclass" />
                    </label> 
                </td>
                <td style="width:14%"> 
                    <div class="TopNamelogo" id="TopNamelogo">利穗科技</div>
</td>
                <td colspan="2" style="width:44%">
                    <div class="TopName" id="TopName">物料管理看板</div>
                </td>
                <td colspan="2" style="width:28%">
                    <div class="time" id="timeStr"></div>
                </td>
            </tr>
            <tr style="width:100%;height:30%;" id="NRow1">
                <td colspan="2" style="padding-top:10px">
                    <ul id="myTab" class="nav nav-tabs">
                        <li><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">年</a></li>
                        <li><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">月</a></li>
                        <li><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">周</a></li>
                        <li class="active" ><a href="#Tab1_RI" data-toggle="tab" class="Tab1Class">日</a> </li> 
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade active in"  id="Tab1_RI">
                            <div  id="TB3" class="echartDivOut">  <div id="panel3" class="echartDiv"></div>   </div>
                        </div>
                         
                    </div>
                </td>
                <td colspan="2" style="padding-top:10px">
                    <div class="gridPanel" id="gridPanel1">
                        <table id="gridList1"></table>

                    </div>
                </td>
                <td colspan="2" id="TB1" style="padding-top:10px" >
                    <div id="panel1" class="echartDiv"></div>
                </td>
            </tr>
            <tr style="width:100%;height:30%;">
                <td colspan="2" >
                    <ul id="myTab2" class="nav nav-tabs">
                        <li><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">年</a></li>
                        <li><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">月</a></li>
                        <li><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">周</a></li>
                        <li class="active"><a href="#Tab2_RI" data-toggle="tab" class="Tab2Class">日</a> </li> 
                    </ul>
                    <div id="myTabContent2" class="tab-content">
                        <div class="tab-pane fade active in" id="Tab2_RI">
                            <div id="TB4" class="echartDivOut">  <div id="panel4" class="echartDiv"></div>   </div>
                        </div>
                       
                    </div>
                     
                </td>
                <td colspan="2">
                    <div class="gridPanel" id="gridPanel2">
                        <table id="gridList2"></table>
                    </div>
                </td>
                <td colspan="2" id="TB2">
                    <div id="panel2" class="echartDiv"></div>
                </td>
            </tr>
            <tr style="width:100%;height:30%;">
                <td colspan="3">
                    <div class="gridPanel" id="gridPanel4">
                        <table id="gridList4  "></table>

                    </div>
                </td>
                <td colspan="3">

                    <ul id="myTab3" class="nav nav-tabs">
                        <li><a href="#Tab3_RI" data-toggle="tab" class="Tab3Class">已完成</a></li> 
                        <li class="active"><a href="#Tab3_RI" data-toggle="tab" class="Tab3Class">未完成</a> </li>
                    </ul>
                    <div id="myTabContent3" class="tab-content">
                        <div class="tab-pane fade active in" id="Tab3_RI">
                            <div class="gridPanel" id="gridPanel3">
                                <table id="gridList3"></table>

                            </div>
                        </div>

                    </div>
                   

                </td>
            </tr>

        </table>

    </div>


</form>