@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script src="~/Content/js/echarts/echarts5.3.3.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%;
    }

    .topRow {
        height: 54px;
        width:100%;
    }

    body {
        height: 100%;
        FONT-SIZE: 18px;
    }

    .TopName {
        vertical-align: middle;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }

    .time {
        vertical-align: middle;
        text-align: center;
        font-size: 20px;
    }
    td {
        padding-bottom:5px; 
        padding-left:2px;
         padding-right:2px;
    }
    .formdiv {
        height: calc(100% - 54px) !important;
         
        margin-left: 10px;
        margin-right: 10px;
    }

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

    table {
        height: 100%;
    }

    html, body {
        height: 100% !important;
    }

    form {
        height: 98% !important;
        background-color: #d9d9d9;
    }
    .echartDiv {
        height:100%;
        width:100%;
    }
    /*.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        height: 24px !important;
    }*/
</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 timer;//刷新数据时间

    $(function () {

        //显示时间
        getTime();

        gridList();


        //刷新数据
        timer = setInterval(function () {
            gridList();
        }, 30 * 1000);


    });

     
    function gridList() {
        SetPanel1();
        SetPanel2();
        SetPanel3();
        SetPanel4();
    }


    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);
    }

    //收货进度  
    function SetPanel1()
    {
        var myChart = echarts.init(document.getElementById('panel1'));

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

        var colors = ['#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); 
                         
                    }

                    myChart.setOption({        //加载数据图表
                        color: colors,
                        title: {
                            show: true,
                            text: '收货进度',
                            textStyle: {
                                fontSize: 20,
                                color: "black"
                            },
                        },
                        backgroundColor: '#1abc9c',
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b},{c}' + '<br>' + '{d}%'
                        },
                        legend: {

                            left: 'right',
                            orient: "vertical"
                        },
                        series: [
                          {

                              type: 'pie',
                              radius: DataPercent,
                              avoidLabelOverlap: false,
                              label: {
                                  show: true,
                                  position: 'inside',
                                  formatter: '{b},{c},{d}%'
                              },

                              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();    //隐藏加载动画
                }
                else {
                    myChart.hideLoading();//隐藏加载动画
                    alert("收货进度没有抓取到相关数据");
                }
            },
            error: function (errorMsg) {
                alert("收货进度图表请求数据失败!", "error");
                myChart.hideLoading();
            }
        });
    }

    //配料进度
    function SetPanel2() {
        var myChart = echarts.init(document.getElementById('panel2'));

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

        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);

                    }


                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            show: true,
                            text: '配料进度',
                            textStyle: {
                                fontSize: 20,
                                color: "black"
                            },
                        },
                        color: colors,
                        backgroundColor: '#1abc9c',
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b},{c}' + '<br>' + '{d}%'
                        },
                        legend: {

                            left: 'right',
                            orient: "vertical"
                        },
                        series: [
                          {

                              type: 'pie',
                              radius: DataPercent,
                              avoidLabelOverlap: false,
                              label: {
                                  show: true,
                                  position: 'inside',
                                  formatter: '{b},{c},{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() {
        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: { 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++) {
                     
                        QtyList.push(result[i].QTY);
                        MonthList.push(result[i].日期);

                    }

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

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

                        grid: {
                            show: false,
                            left: 30,
                            right: 30,
                            top: 60,
                            bottom: 30,
                        },
                        xAxis: {

                            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,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    color: 'white',
                                }

                            }
                        }

                        ]
                    });

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

    //入库数量(item)
    function SetPanel4() {
        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();


        $.ajax({
            url: "/SRM/WatchPanel/GetWareInQty?" + 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++) {

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

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

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

                        grid: {
                            show: false,
                            left: 30,
                            right: 30,
                            top: 60,
                            bottom: 30,
                        },
                        xAxis: {

                            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,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    color: 'white',
                                }

                            }
                        }

                        ]
                    });

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

</script>



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

        <table class="form" >
            <tr  >
                <td style="width:25%">
                    <div></div>
                </td>
                <td colspan="2" style="width:50%">
                    <div class="TopName" id="TopName">仓储管理看板</div>
                </td>
                <td style="width:25%">
                    <div class="time" id="timeStr"></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="formdiv">
        <table class="form">
            <tr style="width:100%;height:50%;">
                <td colspan="2">
                    <div id="panel1" class="echartDiv"></div>
                </td>
                <td colspan="2">
                    <div id="panel2" class="echartDiv"></div>
                </td>
            </tr>
            <tr style="width:100%;height:50%;">
                <td colspan="2">
                    <div id="panel3" class="echartDiv"></div>
                </td>
                <td colspan="2">
                    <div id="panel4" class="echartDiv"></div>
                </td>
            </tr>

        </table>

    </div>

</form>