<%@ 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_two_header.jsp">
    <jsp:param name="title" value="水资源-地下水监测站分析"/>
    <jsp:param name="falg" value="szy"/>
</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-content-noline">
                                <div 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 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 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 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 id="divChart5" 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"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" style="margin-top: 20px;">各区县地下水位监测站网分布</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart11" style="margin-top: 30px; width: 100%;height: 680px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div id="title" class="col-md-5 yuanjiao" style="margin-top: 20px;">安平区县地下水位监测站网</div>
                                    <div class="ibox-content-noline">
                                        <div style="margin-top: 30px; width: 100%;height: 670px;">
                                            <form style="margin-top: 40px;" id="searchForm">
                                                <input id="name" type="hidden" name="regionName" />
                                                编码：<input name="stationCode" style="color: #0f0f0f;">
                                               &nbsp;&nbsp; &nbsp;&nbsp;名称：<input name="stationName"style="color: #0f0f0f;" ><br><br>
                                                类型：<input type="radio" name="stationType" value="自动">自动
                                                <input type="radio" name="stationType" value="人工" style="margin-left: 20px">人工
                                                <input type="radio" name="stationType" value="深层" style="margin-left: 20px">深层
                                                <input type="radio" name="stationType" value="浅层" style="margin-left: 20px">浅层
                                                &nbsp;&nbsp; &nbsp;&nbsp;<input type="button" onclick="search()" value="查询" style="width:56px;border-radius: 8px;color: #FFFFFF;background:teal;border: none;outline: none"/>
                                            </form>
                                            <div style=" margin-top: 20px;height: 580px;overflow: auto">
                                                <table class="table table-bordered " >

                                                    <tbody>
                                                    <tr id="tr">
                                                        <th>编码</th>
                                                        <th>名称</th>
                                                        <th>类型</th>
                                                    </tr>
                                                    </tbody>

                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 50px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-4" style="padding: 0;width:32%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao" style="margin-top: 10px;">地下水位监测站网数</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart6" style="margin-top: 30px; width: 100%;height: 490px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4" style="padding: 0;width:32%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao" style="margin-top: 10px;">监测站网区县构成图</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart7" style="margin-top: 30px; width: 100%;height: 490px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4"style="padding: 0;width:32%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-5 yuanjiao" style="margin-top: 10px;">监测站网类型构成图</div>
                                    <div class="ibox-content-noline">
                                        <div id="divChart8" style="margin-top: 30px; width: 100%;height: 490px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="regionName" name="regionName" value="${regionName}"/>
</body>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>

<script>
    var regionName = $("#regionName").val();
    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 myChart11 = echarts.init(document.getElementById('divChart11'));
    var myChart8 = echarts.init(document.getElementById('divChart8'));
    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 : {
            text: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} (个)"
        },
        legend: {
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            orient: 'vertical',
            x: 'right',
            top:5,
            data:[]
        },

        calculable : true,
        series : [
            {
                name:'',
                type:'pie',
                radius : [20, 110],
                center : ['45%', '50%'],
                roseType : 'area',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[]
            }
        ]
    });


    $.get('<%=basePath%>/topic/water/groundwaterMonitoringStation/getAreaConstitute.action').done(function (data) {
        $.get('<%=basePath%>/resource/json/HS.json', function (geoJson) {

            echarts.registerMap('HS', geoJson);


            myChart11.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    // formatter: '{b}<br/>{c} (个)'
                    formatter:function (params) {
                        var res = '';
                        res+=params['data'].name+'</br>';
                        res+=' '+params['data'].value+'个';
                        return res;
                    }
                },

                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 80,
                    max: 220,
                    text: ['高', '低'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['yellow', 'lightskyblue', 'orangered']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },

                series: [
                    {
                        name: 'GDP',
                        type: 'map',
                        mapType: 'HS', // 自定义扩展图表类型
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data: data.data.list,
                        // 自定义名称映射
                        nameMap: {
                            '安平县': '安平县',
                            '饶阳县': '饶阳县',
                            '深州市': '深州市',
                            '武强县': '武强县',
                            '武邑县': '武邑县',
                            '阜城县': '阜城县',
                            '桃城区': '桃城区',
                            '景县': '景县',
                            '故城县': '故城县',
                            '枣强县': '枣强县',
                            '冀州区': '冀州区'
                        }
                    }

                ]

            });

        });

    })

    myChart8.setOption({
        title : {
            text: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} (个)"
        },
        legend: {
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            orient: 'vertical',
            x: 'right',
            top:5,
            data:[]
        },

        calculable : true,
        series : [
            {
                name:'',
                type:'pie',
                radius : [20, 110],
                center : ['45%', '50%'],
                roseType : 'area',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[]
            }
        ]
    });


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

                series: [
                    {
                        data: data,

                    }
                ]
            });
        });

        <%----%>
        $.get('<%=basePath%>/topic/water/groundwaterMonitoringStation/getMonitoringStation.action?regionName='+regionName).done(function (data) {
            // 填入数据
            var dataList =data;
            var html = "";

            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.stationCode+'</td>';
                tr += '<td>'+item.stationName+'</td>';
                tr += '<td>'+item.stationType+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr").after(html);
        });

        $.get('<%=basePath%>/topic/water/groundwaterMonitoringStation/getMonitoringStationType.action').done(function (data) {
            // 填入数据
            myChart8.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });
        });
        $.get('<%=basePath%>/topic/water/groundwaterMonitoringStation/getAreaConstitute.action').done(function (data) {
            // 填入数据
            myChart7.setOption({
                legend: {
                    data:data.data.names
                },
                series:[{
                    data:data.data.list
                }]
            });
        });

        $.get('<%=basePath%>/topic/water/WholeCityWater/getYesterday.action?regionName='+regionName).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?regionName='+regionName).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?regionName='+regionName).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?regionName='+regionName).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?regionName='+regionName).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();
    myChart11.on('click', function(params){
        var name = params.name;
        $("#name").val(name);
        $("#tr").nextAll().remove();
        $("#title").html(name+"区县地下水位监测站网");
        $("#searchForm")[0].reset();
            $.get('<%=basePath%>/topic/water/groundwaterMonitoringStation/getMonitoringStation.action?regionName='+name).done(function (data) {
            // 填入数据
            var dataList =data;
            var html = "";

            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.stationCode+'</td>';
                tr += '<td>'+item.stationName+'</td>';
                tr += '<td>'+item.stationType+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr").after(html);
        });
    });//点击事件，此事件还可以用到柱状图等其他地图

    function search() {
        $.post(action="<%=basePath%>/topic/water/groundwaterMonitoringStation/getMonitoringStation.action",$("#searchForm").serialize(),function (data) {
            $("#tr").nextAll().remove();
            var dataList =data;
            var html = "";

            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.stationCode+'</td>';
                tr += '<td>'+item.stationName+'</td>';
                tr += '<td>'+item.stationType+'</td>';
                tr += '</tr>';
                html +=tr;
            }
            $("#tr").after(html);
        })
    }
</script>
</html>