<%@ 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/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-top: 30px;margin-bottom: 10px">
                <ul>
                    <c:forEach items="${list}" var="item">
                        <li onclick="toArea('${item.regionName}')" style="float:left;font-size:14px;margin-left:5.6%;cursor: pointer">${item.regionName}</li>
                    </c:forEach>
                </ul>
            </div>
            <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-content-noline">
                                <div onclick="qSYH()" id="divChart1" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>

                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">昨日用水总量</div>
                            <div class="ibox-content-noline">
                                <div onclick="dayMY()" id="divChart2" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">上月用水总量</div>
                            <div class="ibox-content-noline">
                                <div onclick="dayMY()" id="divChart3" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">本月用水总量</div>
                            <div class="ibox-content-noline">
                                <div onclick="dayMY()" id="divChart4" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">今年用水总量</div>
                            <div class="ibox-content-noline">
                                <div onclick="dayMY()" id="divChart5" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-6 yuanjiao">地下水位监测站网数</div>
                            <div class="ibox-content-noline">
                                <div onclick="jianCeZ()" id="divChart6" style="margin-top: 30px; width: 100%;height: 200px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">本市本月每日用水</div>
                            <div class="ibox-content-noline">
                                <div id="divChart7" style="margin-top: 30px; width: 100%;height: 265px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-5 yuanjiao">本市本月每日非农用水</div>
                            <div class="ibox-content-noline">
                                <div id="divChart8" style="margin-top: 30px; width: 100%;height: 265px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao">本市今年用水变化趋势</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart9" style="margin-top: 30px; width: 100%;height: 260px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao">本市今年非农用水变化趋势</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart10" style="margin-top: 30px; width: 100%;height: 260px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao">历年用水变化趋势</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart11" style="margin-top: 30px; width: 100%;height: 260px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao">历年非农用水变化趋势</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart12" style="margin-top: 30px; width: 100%;height: 260px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao">历年供水变化趋势</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart13" style="margin-top: 30px; width: 100%;height: 260px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao">地下水深埋各月平均水位</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart14" style="margin-top: 30px; width: 100%;height: 260px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>

<script>
    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'));
    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'));
    var myChart12 = echarts.init(document.getElementById('divChart12'));
    var myChart13 = echarts.init(document.getElementById('divChart13'));
    var myChart14 = echarts.init(document.getElementById('divChart14'));
    myChart1.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} (户)"
        },

        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:[

                ]
            }
        ]
    });

    myChart7.setOption({
        title: {
                textStyle: {
                    color: '#fff',
            },
            text: '单位：m3'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [

            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    myChart8.setOption({
        title: {
            textStyle: {
                color: '#fff',
            },
            text: '单位：m3'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    myChart9.setOption({
        title: {
            textStyle: {
                color: '#fff',
            },
            text: '单位：m3'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    myChart10.setOption({
        title: {
            textStyle: {
                color: '#fff',
            },
            text: '单位：m3'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    myChart11.setOption({
        title: {
            textStyle: {
                color: '#fff',
            },
            text: '单位：m3'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    myChart12.setOption({
        title: {
            textStyle: {
                color: '#fff',
            },
            text: '单位：m3'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    myChart13.setOption({
        title: {
            textStyle: {
                color: '#fff',
            },
            text: '单位：m3'
        },
        legend: {
                textStyle: {
                    color: '#fff',
                },

            data: ["地下水", "地表水", "合计"]
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'地下水',
                type:'line',
                data:[]
            },
            {
                name:'地表水',
                type:'line',
                data:[]
            },
            {
                name:'合计',
                type:'line',
                data:[]
            }

        ]
    });
    myChart14.setOption({
        title: {
            textStyle: {
                color: '#fff',
            },
            text: '单位：m'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            },
            {
                name:'',
                type:'line',
                data:[]
            },
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });

    var renderFunc = function () {
        $.get('<%=basePath%>/topic/water/WholeCityWater/getConsume.action').done(function (data) {
            // 填入数据
            myChart1.setOption({

                series: [
                    {
                        data: data,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getTotalDay.action').done(function (data) {
            // 填入数据
            myChart7.setOption({
                xAxis: {
                    data: data.day
                },
                series: [
                    {
                        data: data.value,
                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getFeiNongDay.action').done(function (data) {
            // 填入数据
            myChart8.setOption({
                xAxis: {
                    data: data.day
                },
                series: [
                    {
                        data: data.value,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getTotalMonth.action').done(function (data) {
            // 填入数据
            myChart9.setOption({
                xAxis: {
                    data: data.month
                },
                series: [
                    {
                        data: data.value,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getFeiNongMonth.action').done(function (data) {
            // 填入数据
            myChart10.setOption({
                xAxis: {
                    data: data.month
                },
                series: [
                    {
                        data: data.value,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getTotleYear.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                xAxis: {
                    data: data.year
                },
                series: [
                    {
                        data: data.value,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getFeiNongYear.action').done(function (data) {
            // 填入数据
            myChart12.setOption({
                xAxis: {
                    data: data.year
                },
                series: [
                    {
                        data: data.value,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getLiNianGongShui.action').done(function (data) {
            // 填入数据
            myChart13.setOption({

                xAxis: {
                    data: data.years
                },
                series: [
                    {
                        data: data.groundWaters,

                    },
                    {
                        data: data.surfaceWaters,

                    },
                    {
                        data: data.totles,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getDiXiaShuiShenAVG.action').done(function (data) {
           // 填入数据
            myChart14.setOption({
                legend: {
                    textStyle: {
                        color: '#fff',
                    },

                    data: [""+data.years[0]+"",""+data.years[1]+"",""+data.years[2]+""]
                },
                xAxis: {
                    data: data.months
                },
                series: [
                    {
                        name:data.years[2],
                        data: data.thisYears,

                    },
                    {
                        name:data.years[1],
                        data: data.lastYears,

                    },
                    {
                        name:data.years[0],
                        data: data.beforeYears,

                    }
                ]
            });
        });

        $.get('<%=basePath%>/topic/water/WholeCityWater/getYesterday.action').done(function (data) {
            // 填入数据

            myChart2.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} m3',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/WholeCityWater/getLastMonth.action').done(function (data) {
            // 填入数据
            myChart3.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} m3',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/WholeCityWater/getMonth.action').done(function (data) {
            // 填入数据
            myChart4.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} m3',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/WholeCityWater/getYear.action').done(function (data) {
            // 填入数据
            myChart5.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: data.value,
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} m3',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
        $.get('<%=basePath%>/topic/water/WholeCityWater/getJianCeZhanCount.action').done(function (data) {
            // 填入数据
            myChart6.setOption({
                series: [{
                    name: '',
                    type: 'liquidFill',
                    color: ['#13FDCE'],
                    // outline  外边
                    outline: {
                        // show: false
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2aaf66',
                        },
                    },
                    data: [{
                        name: [data],
                        value: 0.4
                    }, 0.5, 0.4, 0.3],
                    label: {
                        normal: {
                            formatter: '{a}\n\n{b} 个',
                            textStyle: {
                                fontSize: 28
                            }
                        }
                    },
                    radius: '80%'
                }]
            }) ;
        }) ;
    };
    renderFunc();
    
    function toArea(regionName) {
        location.href="<%=basePath%>/topic/water/WholeCityWater/areaIndex.htm?regionName="+regionName;
    }
    
    function qSYH() {
        location.href="<%=basePath%>/topic/water/waterUser/index.htm"
    }
    
    function dayMY() {
        location.href="<%=basePath%>/topic/water/DayMonthYear/index.htm"
    }
    function jianCeZ() {
        location.href="<%=basePath%>/topic/water/groundwaterMonitoringStation/index.htm"
    }

</script>
</html>