<%@ 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-4 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>固废污染区域分布</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart1" 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="divChart2" 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="divChart3" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row hidden-print">
        <div class="col-lg-6 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 id="divChart5" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
        <div class="col-lg-6 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 id="divChart7" 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 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'));
        var myChart5 = echarts.init(document.getElementById('divChart5'));
        var myChart6 = echarts.init(document.getElementById('divChart6'));
        var myChart7 = echarts.init(document.getElementById('divChart7'));

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

            myChart2.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data:['总固废','处置固废','利用率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '吨',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '百分比',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }
                ],
                series: [
                    {
                        name:'总固废',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'处置固废',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'利用率',
                        type:'line',
                        yAxisIndex: 1,
                        data:[]
                    }
                ]
            });

            myChart3.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: [
                    {
                        name:'实际',
                        type:'line',
                        stack: '总量',
                        data:[]
                    },
                    {
                        name:'预测',
                        type:'line',
                        stack: '总量',
                        data:[]
                    }
                ]
            }) ;

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

            myChart5.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['工业固废','生活垃圾','危险废物']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'工业固废',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'生活垃圾',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'危险废物',
                        type:'bar',
                        data:[]
                    }
                ]
            });

            myChart6.setOption({
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '最新处理率',
                        type: 'gauge',
                        detail: {formatter:'{value}%'},
                        data: []
                    }
                ]
            }) ;

            myChart7.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data:['无害化','非无害化','未处理','处理率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '吨',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '百分比',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }
                ],
                series: [
                    {
                        name:'无害化',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'非无害化',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'未处理',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'处理率',
                        type:'line',
                        yAxisIndex: 1,
                        data:[]
                    }
                ]
            });

        var renderFunc = function () {
            $.get('<%=basePath%>/admin/countryside/getCountrysideWater.action').done(function (data) {
                // 填入数据
                myChart1.setOption({
                    xAxis: {
                        type: 'category',
                        data: data.names
                    },
                    series: [{
                        data: data.quantity ,
                        type: 'line',
                        smooth: true
                    }]
                });
            })
            $.get('<%=basePath%>/admin/solidWaste/getSolidwasteIndustry.action').done(function (data) {
                // 填入数据
                myChart2.setOption({
                    xAxis: {
                        type: 'category',
                        data: data.names
                    },
                    series: [
                        {
                            name:'总固废',
                            type:'bar',
                            data:data.quantity
                        },
                        {
                            name:'处置固废',
                            type:'bar',
                            data:data.quantityManagement
                        },
                        {
                            name:'利用率',
                            type:'line',
                            yAxisIndex: 1,
                            data:data.utilize
                        }
                    ]
                });
            })
            $.get('<%=basePath%>/admin/solidWaste/getSolidwasteDanger.action').done(function (data) {
                // 填入数据
                myChart3.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.names
                    },
                    series: [
                        {
                            name:'实际',
                            type:'line',
                            stack: '总量',
                            data:data.quantity
                        },
                        {
                            name:'预测',
                            type:'line',
                            stack: '总量',
                            data:data.quantityActual
                        }
                    ]
                });
            })
            $.get('<%=basePath%>/admin/solidWaste/getOneSolidwasteClassification.action').done(function (data) {
                // 填入数据
                myChart4.setOption({
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:data.names
                    },
                    series: [
                        {
                            name:'固废分类情况',
                            data:data.values
                        }
                    ]
                });
            })
            $.get('<%=basePath%>/admin/solidWaste/getSolidwasteClassification.action').done(function (data) {
                // 填入数据
                myChart5.setOption({
                    xAxis : [
                        {
                            type : 'category',
                            data : data.names
                        }
                    ],
                    series : [
                        {
                            name:'工业固废',
                            type:'bar',
                            data:data.quantity
                        },
                        {
                            name:'生活垃圾',
                            type:'bar',
                            data:data.quantity1
                        },
                        {
                            name:'危险废物',
                            type:'bar',
                            data:data.quantity2
                        }
                    ]
                });
            })
            $.get('<%=basePath%>/admin/solidWaste/getOneSolidwasteLife.action').done(function (data) {
                // 填入数据
                myChart6.setOption({
                    series: [
                        {
                            name: '最新处理率',
                            data: [data]
                        }]
                });
            })
            $.get('<%=basePath%>/admin/solidWaste/getSolidwasteLife.action').done(function (data) {
                // 填入数据
                myChart7.setOption({
                    xAxis: [
                        {
                            type: 'category',
                            data: data.names
                        }
                    ],
                    series: [
                        {
                            name:'无害化',
                            type:'bar',
                            data:data.quantity
                        },
                        {
                            name:'非无害化',
                            type:'bar',
                            data:data.quantityNo
                        },
                        {
                            name:'未处理',
                            type:'bar',
                            data:data.untreated
                        },
                        {
                            name:'处理率',
                            type:'line',
                            yAxisIndex: 1,
                            data:data.handle
                        }]
                });
            })
        };
        renderFunc();
        /*setInterval(renderFunc, 3000);*/
    </script>
</body>
</html>