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

<style>
</style>
<div>

    <div>

        <div class="clearfix">
        </div>
        <div class="row">

            <div class="col-md-6 col-sm-6">
                <!-- BEGIN PORTLET-->
                <div class="portlet solid grey-cararra bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-bullhorn"></i><fmt:message key="料仓利用率"/>
                        </div>

                    </div>
                    <div class="portlet-body">

                        <div id="storageUsedChart" style="height: 330px;">

                        </div>
                    </div>
                </div>
                <!-- END PORTLET-->
            </div>
            <div class="col-md-6 col-sm-6">
                <!-- BEGIN PORTLET-->
                <div class="portlet solid bordered grey-cararra">
                    <div class="portlet-title">
                        <div class="caption">
                            <a href="${ctx}/system/dataReport.html"><i class="fa fa-bar-chart-o"></i><fmt:message key="物料分布"/></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="sizeUsageChart" style="height: 330px;">

                        </div>
                    </div>
                </div>
                <!-- END PORTLET-->
            </div>
        </div>

       <div class="clearfix">
        </div>
        <div class="row ">
            <!--温度 -->
            <div class="col-md-6 col-sm-6">
                <div class="portlet box purple-wisteria">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-calendar"></i><fmt:message key="最近7日数据"/>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="inOutChart" style="height:300px">


                        </div>

                    </div>
                </div>
            </div>
            <!--实时湿度 -->
            <div class="col-md-6 col-sm-6">
                <div class="portlet box red-sunglo">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-calendar"></i><fmt:message key="本周数据"/>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="weekChart" style="height:300px">


                        </div>
                    </div>
                </div>
            </div>
        </div>



<fmt:message key="home.chart.storage.total" scope="page" var="storageTotal"/>
<fmt:message key="home.chart.storage.useage" scope="page" var="storageUsage"/>
<fmt:message key="home.chart.storage.empty" scope="page" var="storageEmpty"/>


<fmt:message key="dataReport.solderStock.warming" var="label_warming"/>
<fmt:message key="dataReport.solderStock.warming" var="label_warmed"/>
<fmt:message key="dataReport.solderStock.soonToExpire" var="label_soonToExpire"/>
<fmt:message key="dataReport.solderStock.invalid" var="label_invalid"/>

<c:set var="scripts" scope="request">
    <script src="${ctx}/scripts/echarts.min.js"></script>
    <script src="${ctx}/scripts/chart.js?id=aa"></script>
    <script type="text/javascript">
        setCtx('${ctx}');

        //-----------料仓利用率-----------
        function showStorageUsageBar(storageList){
            var dom = document.getElementById("storageUsedChart");
            var usedChart = echarts.init(dom);
            usedChart.clear();
            usedChart.showLoading();
            var data = storageList;

                    usedChart.hideLoading();
                    var usedCounts = new Array();
                    var emptyCounts = new Array();
                    var names = new Array();
                    for(i in data){
                        var storage = data[i];
                        names.push(storage.name);
                        usedCounts.push(storage.totalSlots - storage.emptySlots);
                        emptyCounts.push(storage.emptySlots);
                    }

                    usedOption = {
                        color: ['#c23531','#308014'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: true},
                                saveAsImage: {show: true}
                            }
                        },
                        legend: {
                            data: ['${storageUsage}', '${storageEmpty}']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis:  {
                            type: 'category',
                            data: names,
                            axisTick: {
                                alignWithLabel: true
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '${storageUsage}',
                                type: 'bar',
                                stack: '${storageTotal}',
//                            label: {
//                                normal: {
//                                    show: true,
//                                    position: 'insideRight'
//                                }
//                            },
                                data: usedCounts
                            },
                            {
                                name: '${storageEmpty}',
                                type: 'bar',
                                stack: '${storageTotal}',
//                            label: {
//                                normal: {
//                                    show: true,
//                                    position: 'insideRight'
//                                }
//                            },
                                data: emptyCounts
                            },
                            {
                                name: '${storageTotal} : ${usedPosData.value}',
                                type: 'pie',
                                radius : '15%',
                                center: ['20%', '20%'],
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                data:[
                                    {value:${usedPosData.value - usedPosData.value2}, name:'${storageUsage}',itemStyle:{normal:{color:'#c23531'}}},
                                    {value:${usedPosData.value2}, name:'${storageEmpty}',itemStyle:{normal:{color:'#308014'}}}
                                ]
                            }
                        ]
                    };
                    usedChart.setOption(usedOption);
        }


        function showSizeUsageBar(storageList){
            var dom = document.getElementById("sizeUsageChart");
            var usedChart = echarts.init(dom);
            usedChart.clear();
            usedChart.showLoading();
            var data = storageList;

            usedChart.hideLoading();
            var sizeData = {};
            for(var i in data){
                var usageMap = data[i].usageMap;

                for(var sizeStr in usageMap){
                    var usageData = usageMap[sizeStr];
                    var sizeItem = sizeData[sizeStr];
                    if(sizeItem){
                        sizeItem.totalCount = sizeItem.totalCount + usageData.totalCount;
                        sizeItem.usedCount = sizeItem.usedCount + usageData.usedCount;
                    }else{
                        sizeItem = usageData;
                    }
                    sizeData[sizeStr] = sizeItem;
                }
            }

            var usedCounts = new Array();
            var emptyCounts = new Array();
            var names = new Array();
            for(var sizeStr in sizeData){
                var sizeItem = sizeData[sizeStr];
                names.push(sizeStr);
                usedCounts.push(sizeItem.usedCount);
                emptyCounts.push(sizeItem.totalCount - sizeItem.usedCount);
            }

            usedOption = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    //data: ['${storageUsage}', '${storageEmpty}']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis:  {
                    type: 'category',
                    data: names,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '${storageUsage}',
                        type: 'bar',
                        stack: '${storageTotal}',
                        //barMaxWidth : 35,
                        itemStyle:{
                            normal: {
                                //color: '#c23531'
                            }
                        },
//                            label: {
//                                normal: {
//                                    show: true,
//                                    position: 'insideRight'
//                                }
//                            },
                        data: usedCounts
                    },
                    <%--{--%>
                        <%--name: '${storageEmpty}',--%>
                        <%--type: 'bar',--%>
                        <%--stack: '${storageTotal}',--%>
                        <%--itemStyle:{--%>
                            <%--normal: {--%>
                                <%--color: '#308014'--%>
                            <%--}--%>
                        <%--},--%>
<%--//                            label: {--%>
<%--//                                normal: {--%>
<%--//                                    show: true,--%>
<%--//                                    position: 'insideRight'--%>
<%--//                                }--%>
<%--//                            },--%>
                        <%--data: emptyCounts--%>
                    <%--},--%>
                ]
            };
            usedChart.setOption(usedOption);
        }

        //-------------出入库-------------
        function showInOutChart(days){
            var inOutDom = document.getElementById("inOutChart");
            var inOutChart = echarts.init(inOutDom);

            var inOutOption;
            var alarmOption;
            inOutChart.showLoading();
            $.post('${ctx}/rest/api/inOutData?days='+days, function(data) {
                var days = new Array();

                var putIns = new Array();
                var checkOuts = new Array();
                var orders = new Array();
                var lastTimes = new Array();

                for(i in data){
                    var inOutItem = data[i];
                    days.push(inOutItem.label);
                    putIns.push(inOutItem.value);
                    checkOuts.push(inOutItem.value2);
                    orders.push(inOutItem.value5);
                    lastTimes.push(inOutItem.value4);
                }
                inOutChart.hideLoading();

                inOutOption = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data:['入库量','出库量',"工单数"]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: days,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '吞吐量',
                            min: 0,
                            //max: 250,
                            //interval: 50,
                            minInterval: 10,
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name:'入库量',
                            type:'line',
                            itemStyle:{
                                normal: {
                                    color: '#9b59b6'
                                }
                            },
                            data:putIns
                        },
                        {
                            name:'出库量',
                            type:'line',
                            itemStyle:{
                                normal: {
                                    color: '#dfba49'
                                }
                            },
                            data:checkOuts
                        },
                        {
                            name:'工单数',
                            type:'line',
//                            itemStyle:{
//                                normal: {
//                                    color: '#dfba49'
//                                }
//                            },
                            data:orders
                        }
                    ]
                };

                inOutChart.setOption(inOutOption);
            });
        }


       //---------本周数据------------
        function showWeekDataChart(){
            var dom = document.getElementById("weekChart");
            var usedChart = echarts.init(dom);
            usedChart.clear();
            usedChart.showLoading();
            $.post('${ctx}/rest/api/weekData', function(data) {
                usedChart.hideLoading();

                var names = ["入库盘数","出库盘数","工单数"];
                var dataArray = new Array();
                dataArray.push(data.value);
                dataArray.push(data.value1);
                dataArray.push(data.value2);

                usedOption = {
                    color: ['#91c7ae'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'category',
                        data: names,
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            type: 'bar',
                            data: dataArray
                        },
                    ]
                };
                usedChart.setOption(usedOption);
            });
        }



        loadUsedData = function(){
            $.post('${ctx}/service/store/storageList', function(data) {
                showStorageUsageBar(data);
                showSizeUsageBar(data);
            });
        }

        loadUsedData();
        showInOutChart(7);
        showWeekDataChart();

        //setTimeout(function(){
            //loadInOutData(6);
            //loadUsedData();
            //loadHumidityData(7);
        //},1000);

    </script>
</c:set>