<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>月份统计</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .wanzhengdiv {
            position: absolute;
            z-index: 100;
            left: 25px;
        }

        .tr {
            text-align: center;
        }

        .td {
            text-align: center;
            line-height: 48px
        }

        #vdlist {
            width: 1770px;
            min-width: 1770px;
        }

        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        #downloadWave {
            margin-top: -25px;
        }

        body {
            overflow: hidden;
        }
    </style>
</head>
<body class="pd15 bg-white">
<div class="container-fluid">
    <div class="form-inline">
        <div class="row">
            <form class="form-inline ml15 header">
                <%@include file="../../include/time.jsp" %>
                <div class="form-group has-feedback mr10 ml10">
                    <label>统计类型：</label>
                    <input type="checkbox" checked class="wanzheng"/>
                </div>
                <button id="query" type="button" title="查询" class="btn themeBGColor">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </form>
        </div>
    </div>
</div>
<div id="container" style="min-width:400px;"></div>
<div id="container1" style="min-width:400px;"></div>
</div>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/echarts/echarts.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    var height = $(window).height() - 60;
    var devIndex = parent.devIndexs;
    var lineName = parent.lineNames;
    var dataPlan = parent.dataPlans;
    var aveDataPlan ;
    var strss = new Array(); //定义一数组
    var strss1 = new Array(); //定义一数组
    var timeMonth1;
    var timeMonth;
    var tltName;
    $("#interval").val("月份");
    //下拉框禁用
    $("#interval").prop("disabled", true);
    $(document).ready(function () {
        tltName = '日均流量';
        $(".wanzheng").bootstrapSwitch({
            onText: "日均",      // 设置ON文本
            offText: "日增长",    // 设置OFF文本
            onColor: "primary",// 设置ON文本颜色     (info/success/warning/danger/primary)
            offColor: "primary",  // 设置OFF文本颜色        (info/success/warning/danger/primary)
            size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)
            handleWidth: "60",//设置控件宽度
            // 当开关状态改变时触发
            onSwitchChange: function (event, state) {
                if (state == true) {
                    tltName = '日均流量';
                } else {
                    tltName = '日流量增长';
                }
                //重新画图
                reDrawAllPic();
            }
        });
        var startTime = $("#startTime").val();
        getFlowDayDetail(startTime, devIndex, tltName);
    })

    //开关触发图片更新
    function reDrawAllPic() {
        queryData(tltName);
    }

    function queryData(tltName) {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getFlowDayDetail(startTime, devIndex, tltName);
    }

    $("#query").click(function () {
        queryData(tltName);
    });

    function getFlowDayDetail(startTime, devIndex, titleName) {
        var strs = new Array(); //定义一数组
        strs = startTime.split("-");
        startTime = strs[0] + "-" + strs[1]
        $.ajax({
            type: "POST",
            url: "/pqs9900/flow/getFlowDayDetail",
            data: {
                startTime: startTime,
                devIndex: devIndex
            },
            async: false,
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 500) {
                    layer.msg(data.message, {icon: 2, time: 2000})
                    resultData = null;
                } else {
                    resultData = data.body;
                    if (titleName == "日均流量") {
                        drawCharts(resultData);
                        document.getElementById("container1").style.display = "none";//隐藏
                        document.getElementById("container").style.display = "";//显示
                    } else {
                        drawCharts1(resultData);
                        document.getElementById("container").style.display = "none";//隐藏
                        document.getElementById("container1").style.display = "";//显示
                    }
                }
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        })
    }

    //画图月份日均图
    function drawCharts(resultData) {
        var x = [];
        var y = [];
        $("#container").css("height", height);
        var comOption = echarts.init($("#container")[0]);
        if (null != resultData) {
            for (var i = 0; i < resultData.length; i++) {
                var eValue = Number(resultData[i].dayFlow);
                var eSingleData = {};
                eSingleData.value = eValue.toFixed(2);
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var strsss = new Array();
                strsss = resultData[i].timeId.split("-");
                x[i] = strsss[2];
            }
            strss = resultData[0].timeId.split("-");
            aveDataPlan = parseFloat(dataPlan/resultData.length).toFixed(2);
        }
        timeMonth = strss[0] + "-" + strss[1];
        //画图
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: lineName + ' 日均流量图',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tips = "";
                    tips += "时间:" + timeMonth + "-" + params[0].name + "<br/>" + params[0].seriesName + ' : ' + params[0].value;
                    return tips;
                }
            },
            visualMap: {
                show: false,
                dimension: 1,
                pieces: [],  //pieces的值由动态数据决定
                outOfRange: {
                    color: dackRed
                }
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '1%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: x,
                name: '时间(' + timeMonth + ')',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true
                }
            }],
            yAxis: [{
                type: 'value',
                name: 'MB',
            }],
            series: [{
                name: '日均流量（MB）',
                type: 'bar',
                barMaxWidth: barMax,
                data: y,
                markLine: {
                    itemStyle: {
                        normal: {
                            borderWidth: 1,

                            lineStyle: {

                                type: 'dash',
                                color: red,
                                width: 2,
                            },

                            label: {
                                formatter: '日均计划使用流量('+aveDataPlan+')',
                                textStyle: {
                                    fontSize: 12,
                                    fontWeight: "bolder",
                                },
                            }
                        },

                    },
                    data: [
                        {yAxis: aveDataPlan, name: '日均计划使用流量'},
                    ]
                }
            }]
        };
        option.visualMap.pieces[0] = {gte: 0, lte: aveDataPlan, color: ITICTop};
        comOption.setOption(option);
    }

    //画图月份增量图
    function drawCharts1(resultData) {
        var x = [];
        var y = [];
        $("#container1").css("height", height);
        $("#container1").css("width", document.body.clientWidth)
        var comOptions = echarts.init($("#container1")[0]);
        if (null != resultData) {
            for (var i = 0; i < resultData.length; i++) {
                var eValue = Number(resultData[i].dayMuchFlow);
                var eSingleData = {};
                eSingleData.value = eValue.toFixed(2);
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var strsss = new Array();
                strsss = resultData[i].timeId.split("-");
                x[i] = strsss[2];
            }
            strss1 = resultData[0].timeId.split("-");
        }
        timeMonth1 = strss1[0] + "-" + strss1[1];
        //画图
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: lineName + ' 日流量增长图',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var tips = "";
                    tips += "时间:" + timeMonth1 + "-" + params[0].name + "<br/>" + params[0].seriesName + ' : ' + params[0].value;
                    return tips;
                }
            },
            visualMap: {
                show: false,
                dimension: 1,
                pieces: [],  //pieces的值由动态数据决定
                outOfRange: {
                    color: red
                }
            },
            grid: {
                left: '1%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: x,
                name: '时间(' + timeMonth1 + ')',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true
                }
            }],
            yAxis: [{
                type: 'value',
                name: 'MB',
            }],
            series: [{
                name: '日流量增长（MB）',
                type: 'line',
                data: y,
                markLine: {
                    itemStyle: {
                        normal: {
                            borderWidth: 2,

                            lineStyle: {

                                type: 'dash',
                                color: red,
                                width: 2,
                            },

                            label: {
                                formatter: '总套餐流量('+dataPlan+')',
                                textStyle: {
                                    fontSize: 12,
                                    fontWeight: "bolder",
                                },
                            }
                        },

                    },
                    data: [
                        {yAxis: dataPlan, name: '总套餐流量'},
                    ]
                }
            }]
        };
        option.visualMap.pieces[0] = {gte: 0, lte: dataPlan, color: ITICTop};
        comOptions.setOption(option);
    }
</script>
</body>
</html>
