<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../../../common/newDark/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../../../../common/newDark/body_two_header.jsp">
    <jsp:param name="title" value="水资源-日月年用水分析"/>
    <jsp:param name="falg" value="szy"/>
</jsp:include>


<div class="layout">
    <div class="container-fluid">
        <div class="row clearfix" style="background-image: url(<%=basePath%>/resource/images/water/bg-water1.png);background-repeat: no-repeat;background-size:100% 100%;">
            <div class="col-md-12" style="margin: 20px 0;">

                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">取水用户总数</div>
                            <div class="ibox-content-noline">
                                <div id="divChart1" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>

                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">昨日用水总量</div>
                            <div class="ibox-content-noline">
                                <div onclick="yesterday()" id="divChart2" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang" >
                            <div class="col-md-4 yuanjiao">上月用水总量</div>
                            <div class="ibox-content-noline" >
                                <div onclick="lastMonth()" id="divChart3" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">本月用水总量</div>
                            <div class="ibox-content-noline">
                                <div onclick="month()" id="divChart4" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">今年用水总量</div>
                            <div class="ibox-content-noline">
                                <div onclick="getYear()" id="divChart5" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang">
                                    <div id="id1" class="col-md-5 yuanjiao" style="margin-top: 5px;">昨日用水</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart11" style="margin-top: 30px; width: 100%;height: 330px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div id="id2" class="col-md-5 yuanjiao" style="margin-top: 5px;">用水构成</div>
                                    <div class="ibox-content-noline">
                                        <div style="width: 100%;height: 310px;">
                                            <table class="table table-bordered " style="margin-top: 50px;">
                                                <tbody>
                                                <tr id="tr1">
                                                    <th>用途</th>
                                                    <th>实际用水量(m3)</th>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 50px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div id="id3" class="col-md-5 yuanjiao" style="margin-top: 10px;">昨日用水构成</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart13" style="margin-top: 30px; width: 100%;height: 380px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div id="id4" class="col-md-5 yuanjiao" style="margin-top: 10px;">昨日各区县用水量</div>
                                    <div class="ibox-content-noline">
                                        <div style="width: 100%;height: 360px;">
                                            <table class="table table-bordered " style="margin-top: 50px;">
                                                <tbody>
                                                <tr id="tr2">
                                                    <th>区县</th>
                                                    <th>实际用水量(m3)</th>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 50px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div id="id5" class="col-md-5 yuanjiao" style="margin-top: 10px;">昨日各行各业用水</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart15" style="margin-top: 30px; width: 100%;height: 380px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div id="id6" class="col-md-5 yuanjiao" style="margin-top: 10px;">昨日各行各业用水量</div>
                                    <div class="ibox-content-noline">
                                        <div style="width: 100%;height: 360px;">
                                            <table class="table table-bordered " style="margin-top: 50px;">
                                                <tbody>
                                                <tr id="tr3">
                                                    <th>行业</th>
                                                    <th>实际用水量(m3)</th>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="regionName" name="regionName" value="${regionName}"/>
</body>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>

<script>
    var regionName = $("#regionName").val();
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    var myChart4 = echarts.init(document.getElementById('divChart4'));
    var myChart5 = echarts.init(document.getElementById('divChart5'));
    var myChart11 = echarts.init(document.getElementById('divChart11'));
    // var myChart12 = echarts.init(document.getElementById('divChart12'));
    var myChart13 = echarts.init(document.getElementById('divChart13'));
    // var myChart14 = echarts.init(document.getElementById('divChart14'));
    var myChart15 = echarts.init(document.getElementById('divChart15'));
    // var myChart16 = echarts.init(document.getElementById('divChart16'));
    myChart1.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} (户)"
        },

        series: [
            {
                name:'',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[

                ]
            }
        ]
    });
    myChart13.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} ：({d}%)"
        },

        series: [
            {
                name:'',
                type:'pie',
                radius: '50%',
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[

                ]
            }
        ]
    });

    myChart11.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} m3"
        },

        series: [
            {
                name:'',
                type:'pie',
                radius: '50%',
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[

                ]
            }
        ]
    });
    myChart15.setOption({
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: "{a} <br/>{b}: {c} m3"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [

            {
                type : 'category',
                data : [],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    }
                },
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    }
                },
            }
        ],
        series : [

            {
                name:'实际用水量',
                type:'bar',
                barWidth: '60%',
                data:[]

            }
        ]
    });


    var renderFunc = function () {
        $.get('<%=basePath%>/topic/water/WholeCityWater/getConsume.action?regionName='+regionName).done(function (data) {
            // 填入数据
            myChart1.setOption({

                series: [
                    {
                        data: data,

                    }
                ]
            });
        });

        <%----%>

        $.get('<%=basePath%>/topic/water/WholeCityWater/getYesterday.action?regionName='+regionName).done(function (data) {
            // 填入数据

            myChart2.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} m3',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/WholeCityWater/getLastMonth.action?regionName='+regionName).done(function (data) {
            // 填入数据
            myChart3.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter:function (params) {
                                var res = '';
                                res+=params['data'].name+'m3';
                                return res;
                            }
                            ,
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/WholeCityWater/getMonth.action?regionName='+regionName).done(function (data) {
            // 填入数据
            myChart4.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} m3',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/WholeCityWater/getYear.action?regionName='+regionName).done(function (data) {
            // 填入数据
            myChart5.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} m3',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/DayMonthYear/getYesterdayYS.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr1").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getYesterdayQXYSGC.action').done(function (data) {
            // 填入数据
            myChart13.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr2").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getYesterdayGHYYS.action').done(function (data) {
            // 填入数据
            myChart15.setOption({
                xAxis : [
                    {
                        data : data.data.names,
                    }
                ],
                series : [
                    {
                        data:data.data.values
                    }
                ]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr3").after(html);
        });



    };
    renderFunc();


    function yesterday(){
        $("#id1").html("昨日用水");
        $("#id3").html("昨日用水构成");
        $("#id4").html("昨日各区县用水量");
        $("#id5").html("昨日各行各业用水");
        $("#id6").html("昨日各行各业用水量");
        $("#tr1").nextAll().remove();
        $("#tr2").nextAll().remove();
        $("#tr3").nextAll().remove();
        $.get('<%=basePath%>/topic/water/DayMonthYear/getLastMonthYS.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr1").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getLastMonthQXYSGC.action').done(function (data) {
            // 填入数据
            myChart13.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr2").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getLastMonthGHYYS.action').done(function (data) {
            // 填入数据
            myChart15.setOption({
                xAxis : [
                    {
                        data : data.data.names,
                    }
                ],
                series : [
                    {
                        data:data.data.values
                    }
                ]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr3").after(html);
        });
    };

    function lastMonth(){
        $("#id1").html("上月用水");
        $("#id3").html("上月用水构成");
        $("#id4").html("上月各区县用水量");
        $("#id5").html("上月各行各业用水");
        $("#id6").html("上月各行各业用水量");
        $("#tr1").nextAll().remove();
        $("#tr2").nextAll().remove();
        $("#tr3").nextAll().remove();
        $.get('<%=basePath%>/topic/water/DayMonthYear/getLastMonthYS.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr1").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getLastMonthQXYSGC.action').done(function (data) {
            // 填入数据
            myChart13.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr2").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getLastMonthGHYYS.action').done(function (data) {
            // 填入数据
            myChart15.setOption({
                xAxis : [
                    {
                        data : data.data.names,
                    }
                ],
                series : [
                    {
                        data:data.data.values
                    }
                ]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr3").after(html);
        });
    };
    function month(){
        $("#id1").html("本月用水");
        $("#id3").html("本月用水构成");
        $("#id4").html("本月各区县用水量");
        $("#id5").html("本月各行各业用水");
        $("#id6").html("本月各行各业用水量");
        $("#tr1").nextAll().remove();
        $("#tr2").nextAll().remove();
        $("#tr3").nextAll().remove();
        $.get('<%=basePath%>/topic/water/DayMonthYear/getMonthYS.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr1").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getMonthQXYSGC.action').done(function (data) {
            // 填入数据
            myChart13.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr2").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getMonthGHYYS.action').done(function (data) {
            // 填入数据
            myChart15.setOption({
                xAxis : [
                    {
                        data : data.data.names,
                    }
                ],
                series : [
                    {
                        data:data.data.values
                    }
                ]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr3").after(html);
        });
    };


    function getYear(){
        $("#id1").html("今年用水");
        $("#id3").html("今年用水构成");
        $("#id4").html("今年各区县用水量");
        $("#id5").html("今年各行各业用水");
        $("#id6").html("今年各行各业用水量");
        $("#tr1").nextAll().remove();
        $("#tr2").nextAll().remove();
        $("#tr3").nextAll().remove();
        $.get('<%=basePath%>/topic/water/DayMonthYear/getYearYS.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr1").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getYearQXYSGC.action').done(function (data) {
            // 填入数据
            myChart13.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr2").after(html);
        });
        $.get('<%=basePath%>/topic/water/DayMonthYear/getYearGHYYS.action').done(function (data) {
            // 填入数据
            myChart15.setOption({
                xAxis : [
                    {
                        data : data.data.names,
                    }
                ],
                series : [
                    {
                        data:data.data.values
                    }
                ]
            });

            var dataList =data.data.list;
            var html = "";
            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.name+'</td>';
                tr += '<td>'+item.value+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr3").after(html);
        });
    };


</script>
</html>