<%@ 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-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="divChart1" 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="divChart1_1" 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="divChart1_2" 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-6 yuanjiao">本市各水库蓄水能力</div>
                            <div class="ibox shortcut">
                                <div id="divChart2" 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="divChart2_1" 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-6 yuanjiao">全省各水库蓄水能力</div>
                            <div class="ibox shortcut">
                                <div id="divChart2_2" 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"style="margin-top: 20px;">
                            <div class="col-md-2 yuanjiao">降雨量分析比较</div>
                            <form style="margin-top: 40px;color: #333333" id="searchFrom">
                                <select name="id" id="regionId"style="color: #333333;width: 64px">
                                </select>
                                <input type="text" name="fromTime" id="fromDate" placeholder="起始时间" class="start"style="margin-left: 30px;" />
                                <input type="text"  name="toTime" id="toDate" placeholder="结束时间" class="start" style="margin-left: 10px;"/>
                                <input type="button" value="本月" onclick="fnDayMonthYear(this)" style="margin-left: 30px;width: 56px;background: #FFFFFF;color: #0f0f0f"/>
                                <input type="button" value="今年" onclick="fnDayMonthYear(this)"style="margin-left: 10px;width: 56px;background: #FFFFFF;color: #0f0f0f"/>
                                <input type="hidden" id="dataTextId" name="dateText">
                                <input type="button" value="查询" onclick="fnSearch()"style="margin-left: 10px;width: 56px;background: teal;color: #ffffff"/>
                                <input type="button" value="重置" onclick="fnReform()"style="margin-left: 10px;width: 56px;background: teal;color: #ffffff;outline: none"/>
                            </form>
                            <div id="main">
                            </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">

    /*全市蓄水总量*/
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    option = {
        series: [{
            name: '全市蓄水总量',
            type: 'liquidFill',
            data:[],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿立方米',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    };
    myChart1.setOption(option);
    var fnChart1=function(){
        $.get('<%=basePath%>/topic/water/floodAndDry/getquanshixushuizongliang.action').done(function (result) {
            myChart1.setOption({
                series: [{
                    data: [{
                        name:result.data,
                        value: 0.4
                    }, 0.5, 0.4, 0.3]
                }]
            });
        })
    }
    fnChart1();


    /*本市各水库蓄水量与多年均值比较*/
    var myChart1_1 = echarts.init(document.getElementById('divChart1_1'));
    var colors = ['#87c6b5', 'red'];
    option = {
        color: colors,

        title : {
            text: '',
            subtext:'单位:亿立方米',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            data:['蓄水量均值']
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                min: 0,
                max: '',
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                name:'今年蓄水量',
                type:'bar',
                data:[]
            },
            {
                name:'蓄水量均值',
                type:'line',
                yAxisIndex: 1,
                data:[]
            }
        ]
    };
    myChart1_1.setOption(option);
    var fnMyChart1_1=function() {
        $.get('<%=basePath%>/topic/water/shuiqing/getbenshigeshuikuxushuiliangyuduonianjunzhibijiao.action', function (result) {
            myChart1_1.setOption({
                xAxis : [{
                    data : result.data.names
                }],
                yAxis:[{
                    max:result.data.max
                },{
                    max:result.data.max
                }],
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.benYear
                },{
                    data: result.data.wangYear
                }]
            });
        })
    }
    fnMyChart1_1();

    /*本市各水库本年蓄水变化*/
    var myChart1_2= echarts.init(document.getElementById('divChart1_2'));
    option = {
        title : {
            text: '',
            subtext:'单位: 亿立方米',
            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: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: []
    };
    myChart1_2.setOption(option);
    var fnMyChart1_2=function() {
        $.get('<%=basePath%>/topic/water/floodAndDry/getgeshuikuxushuiliangbianhua.action', function (result) {
            var re=result.data.result;
            myChart1_2.setOption({
                series:re
            });
        })
    }
    fnMyChart1_2();

    /*本市各水库蓄水能力*/
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var colors = ['#87c6b5', 'blue','red'];
    option = {
        color: colors,

        title : {
            text: '',
            subtext:'单位:亿立方米',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            data:['可用蓄水量','死库容']
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                min: 0,
                max: '',
                type: 'value',
                name: ''
            },
            {
                show:false,
                min: 0,
                max: '',
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                name:'水库最大容量',
                type:'bar',
                data:[]
            },
            {
                name:'可用蓄水量',
                type:'line',
                yAxisIndex: 1,
                data:[]
            },
            {
                name:'死库容',
                type:'line',
                yAxisIndex: 1,
                data:[]
            }
        ]
    };
    myChart2.setOption(option);
    var fnMyChart2=function() {
        $.get('<%=basePath%>/topic/water/shuiqing/getgeshigeshuikuxushuinengli.action', function (result) {
            myChart2.setOption({
                xAxis : [{
                    data : result.data.names
                }],
                yAxis:[{
                    max:result.data.max
                },{
                    max:result.data.max
                },{
                    max:result.data.max
                }],
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.maxSize
                },{
                    data: result.data.useSize
                },{
                    data: result.data.deadSize
                }]
            });
        })
    }
    fnMyChart2();



    /*全省各水库本年蓄水变化*/
    var myChart2_1 = echarts.init(document.getElementById('divChart2_1'));
    option = {
        title : {
            text: '',
            subtext:'单位: 亿立方米',
            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: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: []
    };
    myChart2_1.setOption(option);
    var fnMyChart2_1=function() {
        $.get('<%=basePath%>/topic/water/shuiqing/getquanshenggeshuikuxushuiliangbianhua.action', function (result) {
            var re=result.data.result;
            myChart2_1.setOption({
                series:re
            });
        })
    }
    fnMyChart2_1();

    /*全省各水库蓄水能力*/
    var myChart2_2 = echarts.init(document.getElementById('divChart2_2'));
    var colors = ['#87c6b5', 'blue','red'];
    option = {
        color: colors,

        title : {
            text: '',
            subtext:'单位:亿立方米',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            data:['可用蓄水量','死库容']
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                min: 0,
                max: '',
                type: 'value',
                name: ''
            },
            {
                show:false,
                min: 0,
                max: '',
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                name:'水库最大容量',
                type:'bar',
                data:[]
            },
            {
                name:'可用蓄水量',
                type:'line',
                yAxisIndex: 1,
                data:[]
            },
            {
                name:'死库容',
                type:'line',
                yAxisIndex: 1,
                data:[]
            }
        ]
    };
    myChart2_2.setOption(option);
    var fnMyChart2_2=function() {
        $.get('<%=basePath%>/topic/water/shuiqing/getquanshenggeshuikuxushuinengli.action', function (result) {
            myChart2_2.setOption({
                xAxis : [{
                    data : result.data.names
                }],
                yAxis:[{
                    max:result.data.max
                },{
                    max:result.data.max
                },{
                    max:result.data.max
                }],
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.maxSize
                },{
                    data: result.data.useSize
                },{
                    data: result.data.deadSize
                }]
            });
        })
    }
    fnMyChart2_2();




    /*降雨量分析比较*/
    var params=$("#searchFrom").serialize();
    $("#page").pagination({
        pageSize: 5,
        remote: {
            url: '<%=basePath%>/topic/water/shuiqing/getjiangyuliangfenxibijiao.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>><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].timeText+'</td>'+'<td>'+isNullToText(data[i].rainfall)+'</td>'+'<td>'+isNullToText(data[i].lastYearMonthRainfall)+'</td>' +'<td>'+isNullToText(data[i].longAgoYearMonthAverageRainfall)+'</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'
    });
    //js判空
    function isNullToText(tr) {
        if(tr==null||tr==undefined||tr==''){
            return '暂无无数据';
        }
        return tr;
    }

    //得到地区
    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>