<%@ 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/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .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  mr10 fr mb3" style="margin-bottom: 3px" id="fliteData">
                    <label>筛选数据：</label>
                    <input type="text" class="form-control" onkeyup="searchResult(this.value)"
                           placeholder="空格分开多条件筛选数据">
                </div>
                <button id="query" type="button" title="查询" class="btn themeBGColor">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </form>
        </div>
    </div>
</div>
<div>
    <table id="vdlist"
           class="table table-striped table-bordered dataTable no-footer"
           cellspacing="0" width="100%" role="grid"
           aria-describedby="example_info">
        <thead>
        <tr role="row">
            <th class="text-center">供电公司</th>
            <th class="text-center">变电站</th>
            <th class="text-center">终端名称</th>
            <th class="text-center">IP</th>
            <th class="text-center">监测点名称</th>
            <th class="text-center">套餐流量(MB)</th>
            <th class="text-center">实际流量(MB)</th>
            <th class="text-center">统计流量(MB)</th>
            <th class="text-center">剩余流量(MB)</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
    </table>
    <div id="container" style="min-width:400px;height:400px"></div>
</div>
<input id="gdN" hidden>
<input id="suBN" hidden>
<input id="devI" hidden>
<input id="devN" hidden>
<script src="${ctx}/js/plugin/jquery/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/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/locales/bootstrap-table-zh-CN.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="${ctx}/js/plugin/layui/layer.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}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    var flowTrue;
    var dataPlans = null;
    $("#interval").val("月份");
    //下拉框禁用
    $("#interval").prop("disabled", true);
    $(document).ready(function () {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getFlowDetail(startTime, endTime);
    })
    var dataTable = null;
    var resultData = null;
    $("#query").click(function () {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getFlowDetail(startTime, endTime);
    });

    var devIndexs = null;
    var lineNames = null;

    //获取详细信息
    function getFlowDetail(startTime, endTime) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/flow/getFlowDetail",
            data: {
                startTime: startTime,
                endTime: endTime
            },
            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;
                }
                startQuery();
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        })
    }

    //特殊处理，表头紧缩问题--start
    var it = null;

    function startQuery() {
        //实时刷新时间单位为毫秒
        it = setInterval('refreshQuery()', 100);

    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#vdlist").width();
        if (width > 100) {
            initTable(resultData);
            drawCharts(resultData);
            window.clearInterval(it)
        }
    }


    //特殊处理，表头紧缩问题--end
    var height = $(window).height() - 30;

    //实例化暂降事件表格
    function initTable(data) {
        dataTable = $("#vdlist").DataTable();
        dataTable.clear().draw();
        dataTable = $('#vdlist').DataTable({
            order: [],
            columnDefs: [
                {
                    orderable: false,
                    targets: [3, 9]
                }, {
                    //visible: false, targets: 2
                }
            ],
            columns: [
                {width: "7%", data: "gdNa"},
                {width: "8%", data: "subName"},
                {width: "6%", data: "name"},
                {width: "7%", data: "ip"},
                {
                    width: "7%", data: "lineName",
                    render: function (data, type, full, meta) {
                        var value = data;
                        if(data.length>8){
                            value=data.substring(0,7)+"...";
                            value="<span title="+data+">"+value+"</span>";
                        }
                        return value;
                    }
                },
                {width: "6%", data: "dataPlan"},
                {width: "11%", data: "actualflow"},
                {width: "6%", data: "statflow"},
                {width: "8%", data: "surplusflow"},
                {
                    width: "10%", data: "devIndex",
                    render: function (data, type, full, meta) {
                        var bxck, uploadck;
                        uploadck = "<button type='button' class='btn themeBGColor'" +
                            " style='margin-right:10px;' href='javascript:void(0);' onclick='flush(\"" + data +
                            "\",\"" + full.gdNa + "\",\"" + full.subName + "\",\"" + full.name + "\")' >配置</button>";
                        bxck = "<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='getDetail(\"" + data + "\",\"" + full.lineName + "\",\"" + full.dataPlan + "\")' >查看详情</button>";
                        // uploadck = "<button type='button' class='btn themeBGColor'" +
                        //     " style='margin-right:10px;' href='javascript:void(0);' onclick='flush(\"" + data +
                        //     "\")' >信息更新</button>";

                        return uploadck + bxck;
                    }
                }
            ],
            "createdRow": function (row, data, index) {
                if (data.subName.length > 8) {
                    var realValue = data.subName;
                    var s = data.subName.substr(0, 8) + '...'
                    $('td', row).eq(1).prevObject[1].innerHTML = "<span title='" + realValue + "'>" + s + "</span>";
                }
            },
            destroy: true,
            data: data,
            info: false,
            "paging": false, // 禁止分页
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height * 0.4,
            scrollX: true,
            lengthMenu: [50],
            language: {
                url: '/pqs9900/json/chine.json'
            }
        });
        new $.fn.dataTable.Buttons(dataTable, {
            buttons: [
                {
                    extend: 'csv',
                    title: '服务器列表',//导出csv名称
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                    }
                }
            ]
        });
        modifyCss(dataTable);
    }

    //跳转到配置页面
    function flush(devIndex, subName, gdName, devName) {
        $("#devI").val(devIndex);
        $("#suBN").val(subName);
        $("#gdN").val(gdName);
        $("#devN").val(devName);
        flowTrue = true;
        layer.open({
            type: 2,
            title: '流量配置',
            shadeClose: true,
            resize: false,
            shade: 0.3,
            area: ['100%', '100%'],
            content: 'devmanage', //iframe的url
            scrollbar: false,
            end: function () {
                layer.close();
            }
        });
    }

    function getDetail(devIndex, lineName, dataPlan) {
        dataPlans = dataPlan;
        devIndexs = devIndex;
        lineNames = lineName;
        layer.open({
            type: 2,
            title: '月份统计',
            shadeClose: true,
            resize: false,
            shade: 0.3,
            area: ['100%', '100%'],
            content: 'monthyeardayflow', //iframe的url
            scrollbar: false,
            end: function () {
                layer.close();
            }
        });
    }

    //画图
    function drawCharts(resultData) {
        var x = [];
        var y = [];
        var y1 = [];
        $("#container").css("height", height * 0.5);
        var areaOption = echarts.init($("#container")[0]);
        var areas = [];
        if (resultData.length > 0) {
            var j = 0;
            if (resultData.length > 15) {
                j = 15;
            } else {
                j = resultData.length;
            }
            for (var i = 0; i < j; i++) {
                var eValue = Number(resultData[i].actualflow);
                var eSingleData = {};
                eSingleData.value = eValue.toFixed(2);
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var eValue1 = Number(resultData[i].dataPlan);
                var eSingleData1 = {};
                eSingleData1.value = eValue1.toFixed(2);
                var eItem1 = {};
                eItem1.color = ITICBottom;
                eSingleData1.itemStyle = eItem1;
                y1[i] = eSingleData1;

                var xASingleData = {};
                xASingleData.value = resultData[i].lineName;
                x[i] = xASingleData;
            }
        }
        var labelOption = {
            normal: {
                show: true,
                position: 'top'
            }
        };
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '监测点流量展示图(前15)',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '7%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: x,
                name: '监测点',
                axisLabel: {
                    show: true,
                    interval: 0,
                    formatter: function (value) {
                        return (value.length > 4 ? (value.slice(0, 4) + "...") : value)
                    }
                }, triggerEvent: true
            }],
            yAxis: [{
                type: 'value',
                name: 'MB'

            }],
            series: [{
                name: '实际流量(MB)',
                type: 'bar',
                barGap: 0.2,
                barMaxWidth: barMax,
                label: labelOption,
                data: y
            },
                {
                    name: '统计流量(MB)',
                    type: 'bar',
                    barGap: 0.2,
                    barMaxWidth: barMax,
                    label: labelOption,
                    data: y1
                }
            ]
        };
        areaOption.setOption(option);
    }

    function modifyCss(dataTable) {
        dataTable.buttons().container().css("display", "inline-block");
        dataTable.buttons().container().css("float", "right");
        dataTable.buttons().container().css("top", "4px");
        dataTable.buttons().container().find("a").prepend("<i class='glyphicon glyphicon-share'></i>");
        dataTable.buttons().container().appendTo('.header');
        dataTable.buttons().container().after($("#fliteData")[0]);
    }

    //搜索表中的数据
    function searchResult(value) {
        dataTable.search(value).draw();
    }
</script>
</body>
</html>