<%@ 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/dark/head.jsp"></jsp:include>
    <style type="text/css">
        #divChart1 {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/dark/body_pre.jsp">
    <jsp:param name="title" value="${title}"/>
</jsp:include>
<%--<jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>--%>
<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="row hidden-print">--%>
<div class="col-md-12" style="margin: 50px 0;">
    <div class="col-lg-3 col-md-3 kuang1" >
        <div >
            <div class="col-md-4 yuanjiao">
                <span>果皮箱构成图</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart3" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6">

        <div class="ibox-content-noline">
                <div id="divChart1" style="width: 100%;height: 400px;"></div>
            </div>

    </div>
    <div class="col-lg-3 col-md-3 kuang1">
        <div >
            <div class="col-md-4 yuanjiao">
                <span>环卫设施红黑榜</span>
            </div>
            <div >
                <div id="divChart5" style="width: 100%;height: 200px;"></div>
                <div id="divChart6" style="width: 100%;height: 200px;"></div>
            </div>
        </div>
    </div>
    <%--<div class="col-lg-2 col-md-2 kuang1"  style="margin-top: 20px;">--%>
        <%----%>
    <%--</div>--%>
    <div class="col-lg-6 col-md-6 "  style="margin-top: 20px;padding: 0;">
        <div class="row  kuang1" style="margin-right: 15px;">
            <div class="col-md-3">
                <div  class="yuanjiao">
                    <span>一级街道</span>
                </div>
                <div >
                    <div  style="width: 100%;height: 400px;overflow:auto">
                        <table >
                            <tbody>
                            <tr id="tr">
                                <th>街道</th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
            <div class="yuanjiao">
                <span>二级街区分布图</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart2" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        </div>
    </div>

    <%--<div class="col-lg-2 col-md-2 kuang1"  style="margin-top: 20px;">--%>
        <%----%>
    <%--</div>--%>
    <div class="col-lg-6 col-md-6 "  style="margin-top: 20px;padding: 0;">
        <div class="row kuang1" style="margin-left: 15px;">
            <div class="col-md-3">
                <div class="yuanjiao">
                    <span>一级街道</span>
                </div>
                <div >
                    <div  style="width: 100%;height: 400px;overflow:auto">
                        <table>
                            <tbody>
                            <tr id="tr1">
                                <th>街道</th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="yuanjiao">
                    二级街区百米分布图
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart4" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>

<%--<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>--%>
<jsp:include page="../../../common/dark/body_post.jsp"></jsp:include>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript">

    $.post('<%=basePath%>/admin/waterThing/getPrecipitation.action',function (data) {
        // 百度地图API功能
        map = new BMap.Map("divChart1");
        map.centerAndZoom(new BMap.Point(115.675402, 37.745191),14);
        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 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 myChart6 = echarts.init(document.getElementById('divChart6'));
    //var myChart1 = echarts.init(document.getElementById('divChart1'));

    <%--$.get('<%=basePath%>/resource/json/rlt.json', function (data) {--%>
        <%--var points = [].concat.apply([], data.map(function (track) {--%>
            <%--return track.map(function (seg) {--%>
                <%--return seg.coord.concat([1]);--%>
            <%--});--%>
        <%--}));--%>
            <%--myChart1.setOption(option = {--%>
                <%--animation: false,--%>
                <%--bmap: {--%>
                    <%--center: [120.13066322374, 30.240018034923],--%>
                    <%--zoom: 14,--%>
                    <%--roam: true--%>
                <%--},--%>
                <%--visualMap: {--%>
                    <%--show: false,--%>
                    <%--top: 'top',--%>
                    <%--min: 0,--%>
                    <%--max: 5,--%>
                    <%--seriesIndex: 0,--%>
                    <%--calculable: true,--%>
                    <%--inRange: {--%>
                        <%--color: ['blue', 'blue', 'green', 'yellow', 'red']--%>
                    <%--}--%>
                <%--},--%>
                <%--series: [{--%>
                    <%--type: 'heatmap',--%>
                    <%--coordinateSystem: 'bmap',--%>
                    <%--data: points,--%>
                    <%--pointSize: 5,--%>
                    <%--blurSize: 6--%>
                <%--}]--%>
            <%--});--%>

        <%--});--%>
    var renderFunc = function () {

        $.get('<%=basePath%>/admin/GarbageCan/getGarbageCan.action').done(function (data) {
            var dataList =data;
            var v_book_table_body = "";

            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += "<td style='cursor: pointer'><a onclick=aa(this.text)>"+item.street+"</span>"+'</a></td>';
                tr += '</tr>';
                v_book_table_body +=tr;}

            $("#tr").after(v_book_table_body);
        })
        $.get('<%=basePath%>/admin/GarbageCan/getGarbageCan.action').done(function (data) {
            var dataList =data;
            var v_book_table_body = "";

            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += "<td style='cursor: pointer'><a onclick=bb(this.text)>"+item.street+"</span>"+'</a></td>';
                tr += '</tr>';
                v_book_table_body +=tr;}

            $("#tr1").after(v_book_table_body);
        })

        $.get('<%=basePath%>/admin/GarbageCan/getGarbageCan2.action').done(function (data) {
            myChart2.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data: data.categories,
                        axisLabel: {
                            interval:0,//横轴信息全部显示
                            rotate:-30,//-30度角倾斜显示
                            textStyle: {
                                color: '#999',


                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#fff',


                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value,
                        itemStyle:{
                            normal:{
                                color:'#098479'
                            }
                        },
                        markLine : {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            }
                        }
                    }
                ]
            })
        });
        var n =1;
        $.get('<%=basePath%>/admin/GarbageCan/getGarbageCan2.action?falg='+n).done(function (data) {
            myChart4.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data: data.categories,
                        axisLabel: {
                            interval:0,//横轴信息全部显示
                            rotate:-30,//-30度角倾斜显示
                            textStyle: {
                                color: '#999',


                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#fff',


                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value,
                        itemStyle:{
                            normal:{
                                color:'#098479'
                            }
                        },
                        markLine : {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            }
                        }
                    }
                ]
            })
        });
        $.get('<%=basePath%>/admin/GarbageCan/getGarbageCanList.action').done(function (data) {
            // 填入数据
            myChart3.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     x: 'left',
                //     //data: ["服务业", "居民消费", "财政收入", "其他"]
                // },
                series: [
                    {
                        name:'占比',
                        type: 'pie',
                        radius : '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',

                        data: data,

                    }
                ]
            });
        });

        $.get('<%=basePath%>/admin/newGarbageCan/getTop.action').done(function (data) {
            myChart5.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data: data.categories,
                        axisLabel: {
                            interval:0,//横轴信息全部显示
                            rotate:-30,//-30度角倾斜显示
                            textStyle: {
                                color: '#999',


                            }
                        }
                    }

                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#fff',


                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value,
                        itemStyle:{
                            normal:{
                                color:'#ff9f7e'
                            }
                        },
                        markLine : {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            }
                        }
                    }

                ]
            })
            myChart6.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data: data.categories1,
                        axisLabel: {
                            interval:0,//横轴信息全部显示
                            rotate:-30,//-30度角倾斜显示
                            textStyle: {
                                color: '#999',


                            }
                        }
                    }

                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#fff',


                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value1,
                        itemStyle:{
                            normal:{
                                color:'#4e425a'
                            }
                        },
                        markLine : {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            }
                        }
                    }

                ]
            })
        });

       };
    renderFunc();
    function aa(s) {

        $.get('<%=basePath%>/admin/GarbageCan/getGarbageCan2.action?name='+s).done(function (data) {
            myChart2.setOption({

                xAxis : [
                    {

                        data: data.categories

                    }
                ],

                series : [
                    {

                        data: data.value



                    }
                ]
            });
        })
    }
    function bb(s) {
        var n =1;
        $.get('<%=basePath%>/admin/GarbageCan/getGarbageCan2.action?name='+s+"&falg="+n).done(function (data) {
            myChart4.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data: data.categories,
                        axisLabel: {
                            interval:0,//横轴信息全部显示
                            rotate:-30,//-30度角倾斜显示
                            textStyle: {
                                color: '#000',


                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#fff',


                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value,
                        itemStyle:{
                            normal:{
                                color:'#73c8b4'
                            }
                        },
                        markLine : {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            }
                        }
                    }
                ]
            })
        })
    }


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