<%@ 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="fh"/>
</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 shortcut">
                                <div id="divChart1" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">最近1小时降雨量</div>
                            <div class="ibox shortcut">
                                <div id="divChart2" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">最近3小时降雨量</div>
                            <div class="ibox shortcut">
                                <div id="divChart3" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">最近6小时降雨量</div>
                            <div class="ibox shortcut">
                                <div id="divChart4" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<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 shortcut">
                                <div id="divChart5" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-3 yuanjiao">本市本月降雨变化</div>
                            <div class="ibox shortcut">
                                <div id="divChart6" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">今年降雨变化</div>
                            <div class="ibox shortcut">
                                <div id="divChart7" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<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-6">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">今日降雨与周边地市比较</div>
                            <div class="ibox shortcut">
                                <div id="divChart8" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">本月降雨与周边地市比较</div>
                            <div class="ibox shortcut">
                                <div id="divChart9" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<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-4">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">今年降雨与周边地市比较</div>
                            <div class="ibox shortcut">
                                <div id="divChart10" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">历年降雨与周边地市比较</div>
                            <div class="ibox shortcut">
                                <div id="divChart11" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">本市历年降雨变化</div>
                            <div class="ibox shortcut">
                                <div id="divChart12" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<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-12">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">降雨量明细查询</div>
                            <form style="margin-top: 40px;color: #333333" id="searchFrom">
                                <select name="id" id="regionId"style="color: #333333">
                                </select>
                               <%-- <select name="xuanz" style="color: #333333">
                                    <option ></option>
                                    <option>12</option>
                                    <option>12</option>
                                    <option>12</option>
                                </select>--%>
                                <input type="text" name="fromTime" id="fromDate" placeholder="起始时间" class="start" />
                                <input type="text"  name="toTime" id="toDate" placeholder="结束时间" class="start" />
                                <input type="button" value="今日" style="margin-left: 30px;width: 56px;background: #FFFFFF;color: #0f0f0f" onclick="fnDayMonthYear(this)">
                                <input type="button" value="本月" style="margin-left: 30px;width: 56px;background: #FFFFFF;color: #0f0f0f" onclick="fnDayMonthYear(this)">
                                <input type="button" value="今年" style="margin-left: 30px;width: 56px;background: #FFFFFF;color: #0f0f0f" onclick="fnDayMonthYear(this)">
                                <input type="hidden" id="dataTextId" name="dateText">
                                <input type="button" value="查询" style="margin-left: 10px;width: 56px;background: teal;color: #ffffff" onclick="fnSearch()">
                                <input type="button" value="重置" style="margin-left: 10px;width: 56px;background: teal;color: #ffffff" onclick="fnReform()">
                            </form>
                            <div id="main">
                                <h2 style="color: #4ad6e3;text-align: center;margin-top: 40px;letter-spacing: 3px">加载中···</h2>
                            </div>
                            <div id="page" style="float:right" class="m-pagination"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<link href="<%=basePath%>/resource/css/mricode.pagination.css" rel="stylesheet" />
<script src="<%=basePath%>/resource/plugins/mricode.pagination.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/resource/plugins/jquery-datetimepicker/jquery.datetimepicker.min.css">
<script type="text/javascript" src="<%=basePath %>/resource/plugins/jquery-datetimepicker/jquery.datetimepicker.full.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript">

    /*今日降雨量----最近1小时降雨量----最近3小时降雨量-----最近6小时降雨量*/
    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'));
    option = {
        series: [{
            name: '',
            type: 'liquidFill',
            data:[],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} mm',
                    textStyle: {
                        fontSize: 50,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    };
    myChart1.setOption(option);
    myChart2.setOption(option);
    myChart3.setOption(option);
    myChart4.setOption(option);
    var fnChart1=function(){
        $.get('<%=basePath%>/topic/water/yuqing/getjiangyuliang.action').done(function (result) {
            myChart1.setOption({
                series: [{
                    data: [{
                        name:[result.data[0].temp1],
                        value: 0.4
                    }, 0.5, 0.4, 0.3]
                }]
            });
            myChart2.setOption({
                series: [{
                    data: [{
                        name:[result.data[1].temp1],
                        value: 0.4
                    }, 0.5, 0.4, 0.3]
                }]
            });
             myChart3.setOption({
               series: [{
                   data: [{
                       name:[result.data[2].temp1],
                       value: 0.4
                   }, 0.5, 0.4, 0.3]
               }]
           });
           myChart4.setOption({
               series: [{
                   data: [{
                       name:[result.data[3].temp1],
                       value: 0.4
                   }, 0.5, 0.4, 0.3]
               }]
           });
        })
    }
    fnChart1();


    /*今日降雨变化*/
    var myChart5 = echarts.init(document.getElementById('divChart5'));
    option = {
        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    };
    myChart5.setOption(option);
    var fnMyChart5=function() {
        $.get('<%=basePath%>/topic/water/floodAndDry/getjinrijiangyubianhua.action', function (result) {
            myChart5.setOption({
                xAxis: {
                    data: result.data.names
                },
                series:[{
                    data:result.data.rains
                }]
            });
        })
    }
    fnMyChart5();

    /*本市本月降雨变化*/
    var myChart6 = echarts.init(document.getElementById('divChart6'));
    option = {
        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    };
    myChart6.setOption(option);
    var fnMyChart6=function() {
        $.get('<%=basePath%>/topic/water/yuqing/getbenshibenyuejiangyubianhua.action', function (result) {
            var names=new Array();
            for (var i=0;i<result.data.size;) {
                names[i]=(++i)+'日'
            }
            myChart6.setOption({
                xAxis: {
                    data: names
                },
                series:[{
                    data:result.data.list
                }]
            });
        })
    }
    fnMyChart6();

    /*今年降雨变化*/
    var myChart7 = echarts.init(document.getElementById('divChart7'));
    option = {
        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    };
    myChart7.setOption(option);
    var fnMyChart7=function() {
        $.get('<%=basePath%>/topic/water/yuqing/getjinnianjiangyubianhua.action', function (result) {
            var names=new Array();
            for (var i=0;i<result.data.size;) {
                names[i]=(++i)+'月'
            }
            myChart7.setOption({
                xAxis: {
                    data: names
                },
                series:[{
                    data:result.data.list
                }]
            });
        })
    }
    fnMyChart7();

    /*今日降雨与周边地市比较*/
    var myChart8 = echarts.init(document.getElementById('divChart8'));
    var colors = ['green', 'red'];
    option = {
        color: colors,

        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            }
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '降雨量',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        series: [
            {
                name:'降雨量',
                type:'bar',
                data:[]
            }
        ]
    };
    myChart8.setOption(option);
    var fnMyChart8=function() {
        $.get('<%=basePath%>/topic/water/yuqing/getjinrijiangyuyuzhoubiandishibijiao.action', function (result) {
            myChart8.setOption({
                xAxis : [{
                    data:result.data.names
                }],
                yAxis:[{
                    max:result.data.max
                }],
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.rains
                }]
            });
        })
    }
    fnMyChart8();


    /*本月降雨与周边地市比较*/
    var myChart9 = echarts.init(document.getElementById('divChart9'));
    var colors = ['green', 'red'];
    option = {
        color: colors,

        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            }
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '降雨量',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        series: [
            {
                name:'降雨量',
                type:'bar',
                data:[]
            }
        ]
    };
    myChart9.setOption(option);
    var fnMyChart9=function() {
        $.get('<%=basePath%>/topic/water/yuqing/getbenyuejiangyuyuzhoubiandishibijiao.action', function (result) {
            myChart9.setOption({
                xAxis : [{
                    data:result.data.names
                }],
                yAxis:[{
                    max:result.data.max
                }],
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.rains
                }]
            });
        })
    }
    fnMyChart9();


    /*今年降雨与周边地市比较*/
    var myChart10= echarts.init(document.getElementById('divChart10'));
    var colors = ['green', 'red'];
    option = {
        color: colors,

        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            }
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '降雨量',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        series: [
            {
                name:'降雨量',
                type:'bar',
                data:[]
            }
        ]
    };
    myChart10.setOption(option);
    var fnMyChart10=function() {
        $.get('<%=basePath%>/topic/water/yuqing/getjinnianjiangyuyuzhoubiandishibijiao.action', function (result) {
            myChart10.setOption({
                xAxis : [{
                    data:result.data.names
                }],
                yAxis:[{
                    max:result.data.max
                }],
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.rains
                }]
            });
        })
    }
    fnMyChart10();

    /*历年降雨与周边地市比较*/
    var myChart11 = echarts.init(document.getElementById('divChart11'));
    option = {
        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'category',
            boundaryGap: false,
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: []
    };
    myChart11.setOption(option);
    var fnMyChart11=function() {
        $.get('<%=basePath%>/topic/water/yuqing/getlinianjiangyuyuzhoubianbijiao.action', function (result) {
            var re=result.data.list;
            myChart11.setOption({
                xAxis: {
                    data: result.data.names
                },
                series:re
            });
        })
    }
    fnMyChart11();

    /*本市历年降雨变化*/
    var myChart12 = echarts.init(document.getElementById('divChart12'));
    option = {
        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'category',
            boundaryGap: false,
            data: ''
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: []
    };
    myChart12.setOption(option);
    var fnMyChart12=function() {
        $.get('<%=basePath%>/topic/water/yuqing/getbenshilinianjiangyubianhua.action', function (result) {
            var re=result.data.list;
            myChart12.setOption({
                xAxis: {
                    data: result.data.names
                },
                series:re
            });
        })
    }
    fnMyChart12();


    /*降雨量明细查询*/
    var params=$("#searchFrom").serialize();
    $("#page").pagination({
        pageSize: 4,
        remote: {
            url: '<%=basePath%>/topic/water/yuqing/getjiangyumingxichaxun.action',
            params: params,
            success: function (result) {
                var data=result.list;/*查询的数据*/
                $('#main').html('');
                if (data.length>0) {
                    var html = ' <table style="width: 100%;text-align: center">' +
                        '<tr style="height: 36px;color: #66e1e3"><td>区县</td><td>监测站</td><td>日期</td><td>降雨量</td></tr>';
                    for (var i = 0; i < data.length; i++) {
                        if(i%2==0){
                            html+='<tr style="background: #162c51;height: 36px;text-align: center">'
                        }else{
                            html+='<tr style="height: 36px;text-align: center">'
                        }
                        html +='<td>'+data[i].regionName+'</td>'+'<td>'+data[i].stationName+'</td>'+'<td>'+timestampToTime(data[i].captureTime)+'</td>'+'<td>'+data[i].rainfall+'</td>' +
                            '<tr>'
                    }
                    $("#main").append(html);
                }else{
                    var html='<h2 style="color: #4ad6e3;text-align: center;margin-top: 40px;letter-spacing: 3px">暂无结果</h2>';
                    $("#main").append(html);
                }
            },
            totalName:'total'
        }
    });
    function timestampToTime(timestamp) {
        if(timestamp==null){
            return '';
        }
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D;
    }

    //时间控件
    $.datetimepicker.setLocale('zh');
    $("#fromDate").datetimepicker({
        format: 'Y-m-d'
    });

    $("#toDate").datetimepicker({
        format: 'Y-m-d'
    });

    //得到地区
    function fnGetRegion(){
        $.get('<%=basePath%>/topic/water/yuqing/getRegion.action',function(result){
            $('#regionId').html('');
            var html='<option value=""></option>'
            for(var i=0;i<result.length;i++){
                html+='<option value='+result[i].id+'>'+result[i].regionName+'</option>'
            }
            $('#regionId').html(html);
        })
    }
    fnGetRegion();
    //得到类型

    function fnDayMonthYear(tr){
        $('#dataTextId').val('');
        var val = $(tr).val();
        $('#dataTextId').val(val);
        fnSearch();
    }
    function fnSearch(){
        params=$("#searchFrom").serialize();
        $("#page").pagination('setParams', params);
        $("#page").pagination('setPageIndex', 0);
        $("#page").pagination('remote');
    }
    function fnReform(){
        $('#dataTextId').val('');
        $('#searchFrom')[0].reset();
    }
</script>
</html>