<%@ 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">
</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  style="width: 100%;height: 400px;overflow:auto">
                    <table class="table table-striped table-bordered table-hover ">
                        <tbody>
                        <tr id="tr">
                            <th>街道</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5 col-md-5">
        <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>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-4">
        <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>
            </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  style="width: 100%;height: 400px;overflow:auto">
                    <table class="table table-striped table-bordered table-hover ">
                        <tbody>
                        <tr id="tr1">
                            <th>街道</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5 col-md-5">
        <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>
</div>


<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript">
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    var myChart4 = echarts.init(document.getElementById('divChart4'));



    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><a onclick=aa(this.text)>"+item.street+'</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><a onclick=bb(this.text)>"+item.street+'</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: '#000',


                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value,
                        itemStyle:{
                            normal:{
                                color:'#73c8b4'
                            }
                        },
                        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: '#000',


                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value,
                        itemStyle:{
                            normal:{
                                color:'#73c8b4'
                            }
                        },
                        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,

                    }
                ]
            });
        });



       };
    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'
                    }
                ],
                series : [
                    {
                        name:'果皮箱个数',
                        type:'bar',
                        data: data.value,
                        itemStyle:{
                            normal:{
                                color:'#73c8b4'
                            }
                        },
                        markLine : {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            }
                        }
                    }
                ]
            })
        })
    }


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