<%@ 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/admin/head.jsp"></jsp:include>
    <link  rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/admin/home/index.css">
    <style type="text/css">
        #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
        #r-result{height:100%;width:20%;float:left;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RleRpI1DQegNo17XGsVvUUS1e3oiubUG"></script>
</head>
<body>
    <jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>
    <div class="row hidden-print">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h2>水务管理</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="javascript:void(0);" >运行分析</a>
                        </li>
                        <li class="active">
                            <strong>水务管理</strong>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row hidden-print">
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>降水量分布</span>
                </div>
                <div class="ibox-content-noline">
                <div id="allmap" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut" >
                <div class="ibox-title-noline">
                    <span>降水总量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart2" style="width: 100%;height: 400px;">
                        <div class="form-group">
                            <label  class="col-lg-12  text-left">降水总量：</label>
                        </div>

                        <div class="form-group">
                            <label style="color: red"  class="col-lg-12  text-center">${jiangshui.total}</label>
                        </div>

                        <div class="form-group">
                            <label style="color:red;"  class="col-lg-12  text-center">${jiangshui.growth}</label>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-12  text-left">年径流量：</label>
                        </div>
                        <div class="form-group">
                            <label style="color:red;"   class="col-lg-12  text-center">${jiangshui.annualRunoff}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>水资源总量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart3" style="width: 100%;height: 400px;">
                        <div class="form-group">
                            <label  class="col-lg-12  text-left">水资源量：</label>
                        </div>
                        <br/>
                        <div class="form-group">
                            <label style="color:red;"   class="col-lg-12  text-center"> ${shuiziyuan.total}</label>
                        </div>
                        <div class="form-group">
                            <label style="color:red;"   class="col-lg-12  text-center">  ${shuiziyuan.growth}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>蓄水总量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart4" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
            <%--<div class="ibox shortcut">--%>
                <%--<div class="ibox-title-noline">--%>
                    <%--<span>蓄水总量</span>--%>
                <%--</div>--%>
                <%--<div class="ibox-content-noline">--%>
                    <%--<div id="divChart4" style="width: 100%;height: 400px;">--%>
                        <%--<div class="form-group">--%>
                            <%--<label  class="col-lg-12  text-left">蓄水总量：</label>--%>
                        <%--</div>--%>

                        <%--<div class="form-group">--%>
                            <%--<label style="color:red;"   class="col-lg-12  text-center">  ${xushui.total}</label>--%>
                        <%--</div>--%>

                        <%--<div class="form-group">--%>
                            <%--<label style="color:red;"   class="col-lg-12  text-center">  ${xushui.growth}</label>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
        </div>
    </div>
    <div class="row hidden-print">
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>供水量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart5" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>主要企业用水量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart6" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>污水排放量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart7" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>人均用水量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart8" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row hidden-print">
        <div class="col-lg-4 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>水源地水质分析</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart9" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>全市供水量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart10" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>县供水量</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart11" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
    <script type="text/javascript">
        $.post('<%=basePath%>/admin/waterThing/getPrecipitation.action',function (data) {
            // 百度地图API功能
            map = new BMap.Map("allmap");
            map.centerAndZoom(new BMap.Point(115.675402, 37.745191), 15);
            var data_info = [];
            if (data.length>0){
                for(var y=0;y<data.length;y++){
                    var dataObj = [data[y].longitude, data[y].latitude, data[y].regionName+"：" + data[y].dataValue]
                    data_info.push(dataObj);
                }
            }
            var opts = {
                width : 250,     // 信息窗口宽度
                height: 80,     // 信息窗口高度
                title : "降水量" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            };
            for(var i=0;i<data_info.length;i++){
                var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
                var content = data_info[i][2];
                map.addOverlay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }
            function addClickHandler(content,marker){
                marker.addEventListener("click",function(e){
                    openInfo(content,e)}
                );
            }
            function openInfo(content,e){
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            }
        },"json") ;

        var myChart4 = echarts.init(document.getElementById('divChart4'));
        var myChart5 = echarts.init(document.getElementById('divChart5'));
        var myChart6 = echarts.init(document.getElementById('divChart6'));
        var myChart7 = echarts.init(document.getElementById('divChart7'));
        var myChart8 = echarts.init(document.getElementById('divChart8'));
        var myChart9 = echarts.init(document.getElementById('divChart9'));
        var myChart10 = echarts.init(document.getElementById('divChart10'));
        var myChart11 = echarts.init(document.getElementById('divChart11'));

            myChart4.setOption({
                tooltip: {
                    trigger: 'axis'
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'蓄水总量',
                        type:'line',
                        stack: '总量',
                        data:[]
                    }
                ]
            });

            myChart5.setOption( {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                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: []
                    }
                ]
            });

            myChart6.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:[]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            });

            myChart7.setOption({
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [
                    {
                        name:'污水排放量',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: 'rgb(255, 70, 131)'
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(255, 70, 131)'
                                }])
                            }
                        },
                        data: []
                    }
                ]
            }) ;

            myChart8.setOption({
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: true
                },
                series: [{
                    data: [],
                    type: 'line',
                    smooth: true
                }]
            }) ;

            myChart9.setOption({
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {
                axisLabel:{
                    formatter: function (value) {
                        var texts = [];
                        if(value==0||value==null){
                            texts.push('0');
                        }
                        else if (value == 1) {
                            texts.push('I类');
                        }
                        else if (value == 2) {
                            texts.push('II类');
                        }
                        else if(value == 3){
                            texts.push('III类');
                        }
                        else if(value == 4){
                            texts.push('IV类');
                        }else if(value == 5){
                            texts.push('V类');
                        }
                        return texts;

                    }
                }
            },
            series: [{
                data: [],
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#73c8b4'
                    }
                },
            }
            ]
        });

            myChart10.setOption({
            tooltip: {
                trigger: 'axis'
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'全市供水量',
                    type:'line',
                    stack: '总量',
                    data:[]
                }
            ]
        });

            myChart11.setOption(
                {
            tooltip: {
                trigger: 'axis'
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'县供水量',
                    type:'bar',
                    stack: '总量',
                    data:[]
                }
            ]
        }



        );


        var renderFunc = function () {
            $.get('<%=basePath%>/admin/waterThing/getChangeWaterStorageAggregate.action').done(function (data) {
                // 填入数据
                myChart4.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.categories
                    },
                    series: [
                        {
                            name: '蓄水总量',
                            type: 'line',
                            stack: '总量',
                            data: data.value
                        }
                    ]
                })
            })

            $.get('<%=basePath%>/admin/waterThing/getWaterSupplyAggregate.action').done(function (data) {
                // 填入数据
                myChart5.setOption({
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '供水量',
                        data: data
                    }]
                });
            })
            $.get('<%=basePath%>/admin/waterThing/getWaterSupplyMain.action').done(function (data) {
                // 填入数据
                myChart6.setOption({
                    xAxis: {
                        data: data.years
                    },
                    // legend: {
                    //     data:data.titles
                    // },
                    series: data.series
                });
            })
            $.get('<%=basePath%>/admin/waterThing/getSewageDischarge.action').done(function (data) {
                // 填入数据
                myChart7.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '污水排放量',
                        data: data.value
                    }]
                });
            })
            $.get('<%=basePath%>/admin/waterThing/getWaterConsumptionPerCapita.action').done(function (data) {
                // 填入数据
                myChart8.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        data: data.value
                    }]
                });
            })
            $.get('<%=basePath%>/admin/waterThing/getWaterSourceQualityAnalysis.action').done(function (data) {
                // 填入数据
                myChart9.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        data: data.value
                    }]
                });
            })

            $.get('<%=basePath%>/admin/waterThing/getWaterAllCity.action').done(function (data) {
                // 填入数据
                myChart10.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.categories
                    },
                    series: [
                        {
                            name: '全市供水量',
                            type: 'line',
                            stack: '总量',
                            data: data.value
                        }
                    ]
                })
            })

            $.get('<%=basePath%>/admin/waterThing/getWaterAllCounty.action').done(function (data) {
                // 填入数据
                myChart11.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.categories
                    },
                    series: [
                        {
                            name: '县供水量',
                            type: 'bar',
                            stack: '总量',
                            data: data.value
                        }
                    ]
                })
            })

        };
        renderFunc();
        /*setInterval(renderFunc, 3000);*/
    </script>
</body>
</html>