<%@ 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>
<head>
    <jsp:include page="../../../../common/newDark/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../../../../common/newDark/body_header.jsp">
    <jsp:param name="title" value="综合指标概况"/>
</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-3">
                    <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 class="ibox-content-noline">
                                    <div id="divChart1" style="width: 100%;height: 350px;"></div>
                                </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-4 yuanjiao">城市污水达标率</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart8" style="width: 100%;height: 350px;"></div>
                                </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-4 yuanjiao">农村自来水普及率</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart9" style="width: 100%;height: 350px;"></div>
                                </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-4 yuanjiao">农村生活污水处理率及排名</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart2" style="width: 100%;height: 350px;"></div>
                                </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-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 class="ibox-content-noline">
                                    <div id="divChart3" style="width: 100%;height: 350px;"></div>
                                </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-4 yuanjiao">重点污染源工业废水排放</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart4" style="width: 100%;height: 350px;"></div>
                                </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-4 yuanjiao">水耗</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart5" style="width: 100%;height: 350px;"></div>
                                </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-4 yuanjiao">集中式饮用水水源地水质情况</div>
                            <div class="ibox-content-noline">
                                <div id="divChart13" style="width: 100%;height: 350px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<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 myChart8 = echarts.init(document.getElementById('divChart8'));
    var myChart9 = echarts.init(document.getElementById('divChart9'));
    var myChart13 = echarts.init(document.getElementById('divChart13'));

    var option1 = {
        series: [{
            name: '达标率',
            type: 'liquidFill',
            data: [{
                name: '',
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} %',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '70%'
        }]
    };

    var option8 = {
        series: [{
            name: '污水率',
            type: 'liquidFill',
            data: [{
                name: '',
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} %',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '70%'
        }]
    };

    var option4 = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            textStyle: {
                color: '#fff'
            },
            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:[]
            }
        ]
    } ;

    var option13 = {
        color: ['#87c6b5', '#c9866b'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            textStyle: {
                color: '#fff'
            },
            data: ['达标水量', '未达标水量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        yAxis: {
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            data: []
        },
        series: [
            {
                name: '达标水量',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: []
            },
            {
                name: '未达标水量',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: []
            }
        ]
    };

    var option9 = {
        xAxis: {
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            data: []
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    };

    var option2 = {
        xAxis: {
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            data: []
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    } ;





    var renderFunc = function () {
        $.get('<%=basePath%>/topic/water/synthetical/getWaterqualityHandle.action').done(function (data) {
            // 填入数据
            option1.series[0].data[0].name = data*100;
            myChart1.setOption(option1);
        })
        $.get('<%=basePath%>/topic/water/synthetical/getWaterqualityCityHandle.action').done(function (data) {
            // 填入数据
            option8.series[0].data[0].name = data*100;
            myChart8.setOption(option8);
        })
        $.get('<%=basePath%>/topic/water/synthetical/getWaterqualitySurface.action').done(function (data) {
            // 填入数据
            option4.legend.data = data.names ;
            option4.series[0].data = data.values ;
            myChart4.setOption(option4);
        })
        $.get('<%=basePath%>/topic/water/synthetical/getWaterqualityFocus.action').done(function (data) {
            // 填入数据
            option13.yAxis.data = data.regionName ;
            option13.series[0].data = data.quantity ;
            option13.series[1].data = data.quantityNo ;
            myChart13.setOption(option13);
        })
        $.get('<%=basePath%>/topic/water/synthetical/getCountrysideWater.action').done(function (data) {
            // 填入数据
            option9.xAxis.data = data.names ;
            option9.series[0].data = data.quantity ;
            myChart9.setOption(option9);
        })
        $.get('<%=basePath%>/topic/water/synthetical/getCountrysideGarbage.action').done(function (data) {
            // 填入数据'
            option2.xAxis.data =  data.names ;
            option2.series[0].data = data.quantity ;
            myChart2.setOption(option2);
        })
        $.get('<%=basePath%>/topic/water/synthetical/getConsume.action').done(function (data) {
            // 填入数据
            myChart5.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.dataYear,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '水耗值',
                        type: 'bar',

                        data: data.waterValue
                    }
                ]
            });
        });

        $.get('<%=basePath%>/topic/water/synthetical/getDealWithTheStandard.action').done(function (data) {
            myChart3.setOption({
                // title: {
                //     text: '堆叠区域图'
                // },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    data:data.name
                },
                toolbox: {
                    feature: {
                        // saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        type : 'category',
                        boundaryGap : false,
                        data : data.dataYear
                    }
                ],
                yAxis : [
                    {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'工业三废',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:data.siG

                    },
                    {
                        name:'生活垃圾',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:data.reads
                    },
                    {
                        name:'生活污水',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:data.wifi
                    }
                ]
            });
        })

    };
    renderFunc();
</script>
</body>
</html>