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


<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    <fmt:message key="menu.bigdata.runStatus"/>
</h3>


<div class="row">
    <div class="col-md-12">
        <form method="post" action="${ctx}/system/runStatus.html">
            <div class="form-group">
                <div class="col-md-4" style="padding-left:0px;">
                    <div class="input-group input-large date-picker input-daterange" data-date="2017-05-10" data-date-format="${datePatten}">
                        <input type="text" class="form-control" name="startDay" value="${startDay}">
												<span class="input-group-addon">
												to </span>
                        <input type="text" class="form-control" name="endDay" value="${endDay}">
                    </div>
                    <!-- /input-group -->
                    <span class="help-block"> </span>
                </div>
                <div class="col-md-6">
                    <div class="btn-group">
                        <button class="btn yellow" type="submit">
                            <i class="fa fa-sign-out"></i><fmt:message key="btn.view"/></button>
                    </div>
                </div>
            </div>
        </form>

    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- BEGIN CHART PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-bar-chart font-green-haze"></i>
                    <span class="caption-subject bold uppercase font-green-haze"><fmt:message key="runStatus.throughput"/></span>
                </div>
                <div class="tools">
                </div>
            </div>
            <div class="portlet-body">
                <div id="inOutChart" class="chart" style="height: 350px; overflow: hidden;">
                </div>
            </div>
        </div>
        <!-- END CHART PORTLET-->
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <!-- BEGIN CHART PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-bar-chart font-green-haze"></i>
                    <span class="caption-subject bold uppercase font-green-haze"><fmt:message key="runStatus.alarmInfo"/></span>
                </div>
                <div class="tools">
                </div>
            </div>
            <div class="portlet-body">
                <div class="row">
                    <div class="col-md-12">
                        <div id="alarmChart" class="chart" style="height: 350px; overflow: hidden;">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div id="alarmTypeChart" class="chart col-md-6" style="height: 250px; overflow: hidden;">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div id="alarmBoxChart" class="chart col-md-6" style="height: 250px; overflow: hidden;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END CHART PORTLET-->
    </div>
</div>

<fmt:message key="runStatus.throughput" var="label_throughput"/>
<fmt:message key="runStatus.alarmTimes" var="label_alarmTimes"/>
<fmt:message key="runStatus.alarmLastTime" var="label_alarmLastTime"/>
<fmt:message key="runStatus.minutes" var="label_minutes"/>


<input id="jsondata" type="hidden" value='${inOutChartJsonData}' />
<c:set var="scripts" scope="request">
    <script src="${ctx}/scripts/echarts.min.js"></script>

    <script type="text/javascript">

        var days = new Array();

        var alarms = new Array();
        var lastTimes = new Array();
        <c:forEach items="${inOutData}" var="inOutItem">
        days.push("${inOutItem.label}");
        //putIns.push("${inOutItem.value}");
        //checkOuts.push("${inOutItem.value2}");
        alarms.push("${inOutItem.value3}");
        lastTimes.push("${inOutItem.value4}");
        </c:forEach>

        var inOutChart = echarts.init(document.getElementById("inOutChart"));


        var inOutJsonData = $('#jsondata').val();
        var inOutData =eval('('+inOutJsonData+')');//jsonObj就是一个json对象了。
        inOutOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    //dataView: {show: true, readOnly: true},
                    //saveAsImage: {show: true}
                }
            },
            legend: {
                data:inOutData.legend
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data : inOutData.xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '${label_throughput}',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: inOutData.series
        };
        inOutChart.setOption(inOutOption);

        alarmOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:['${label_alarmTimes}','${label_alarmLastTime}']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: days,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '${label_alarmTimes}',
                    min: 0,
                    max: 500,
                    //interval: 5,
                    minInterval: 1,
                    axisLabel: {
                        formatter: '{value} ${label_times}'
                    }
                },
                {
                    type: 'value',
                    name: '${label_alarmLastTime}(${label_minutes})',
                    min: 0,
                    max: 1000,
                    //interval: 50,
                    minInterval: 1,
                    axisLabel: {
                        formatter: '{value} ${label_minutes}'
                    }
                }

            ],
            series: [
                {
                    name:'${label_alarmTimes}',
                    type:'line',
                    symbol: 'emptyCircle',
                    symbolSize: 10,
                    itemStyle:{
                        normal: {
                            color: '#F3565D'
                        }
                    },
                    data:alarms
                }
                ,
                {
                    name:'${label_alarmLastTime}',
                    type:'line',
                    symbol: 'emptyCircle',
                    stack: '总量',
                    symbolSize: 10,
                    itemStyle:{
                        normal: {
                            color: '#4b77be'
                        }
                    },
                    areaStyle: {normal: {}},
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    yAxisIndex: 1,
                    data:lastTimes
                }
            ]
        };

        var alarmChart = echarts.init(document.getElementById("alarmChart"));
        alarmChart.setOption(alarmOption);



        //报警类型

        var types = new Array();
        var typeCount = new Array();
        var typeLastTimes = new Array();
        <c:forEach items="${alarmTypeData}" var="alarmTypeItem">
        types.push("${alarmTypeItem.label}");
        typeCount.push({name:"${alarmTypeItem.label}",value:${alarmTypeItem.value}});
        typeLastTimes.push({name:"${alarmTypeItem.label}",value:${alarmTypeItem.value2}});
        </c:forEach>
        alarmTypeOption = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} <br/>{a}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:types
            },
            color: ['#4b8df8','#4da74d','#edc240','#cb4b4b', '#afd8f8','#9440ed','#36d7b7','#b074ff','#749f83','#91c7ae','#d48265','#61a0a8', '#2f4554', '#c23531'],
            series: [
                {
                    name:'报警次数',
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '40%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data:typeCount
                },
                {
                    name:'报警持续时间',
                    type:'pie',
                    radius: ['55%', '75%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data:typeLastTimes
                }
            ]

        };

        var alarmTypeChart = echarts.init(document.getElementById("alarmTypeChart"));
        alarmTypeChart.setOption(alarmTypeOption);


        //报警BOX

        var boxs = new Array();
        var boxCount = new Array();
        var boxLastTimes = new Array();
        <c:forEach items="${alarmBoxData}" var="alarmBoxItem">
        boxs.push("${alarmBoxItem.label}");
        boxCount.push({name:"${alarmBoxItem.label}",value:${alarmBoxItem.value}});
        boxLastTimes.push({name:"${alarmBoxItem.label}",value:${alarmBoxItem.value2}});
        </c:forEach>
        alarmBoxOption = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} <br/>{a}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:boxs
            },
            series: [
                {
                    name:'报警次数',
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '40%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data:boxCount
                },
                {
                    name:'报警持续时间',
                    type:'pie',
                    radius: ['55%', '75%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data:boxLastTimes
                }
            ]

        };

        var alarmBoxChart = echarts.init(document.getElementById("alarmBoxChart"));
        alarmBoxChart.setOption(alarmBoxOption);



        $.fn.datepicker.dates['zh-CN'] = {
            days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            today: "今天",
            suffix: [],
            meridiem: ["上午", "下午"]
        };


        $('.date-picker').datepicker({
            rtl: Metronic.isRTL(),
            orientation: "left",
            autoclose: true,
            language:'zh-CN'
        });

    </script>
</c:set>