<%@ page import="com.lightinit.hsdatashow.dictionary.DicEducationType" %>
<%@ page import="com.lightinit.hsdatashow.model.admin.DicOrganizationType" %>

<%@ 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>
    <style type="text/css">
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=RleRpI1DQegNo17XGsVvUUS1e3oiubUG"></script>
</head>
<body>
<jsp:include page="../../../../common/newDark/body_two_header.jsp">
    <jsp:param name="title" value="防汛抗旱-工情分析"/>
    <jsp:param name="falg" value="fh"/>
</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-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 id="divChart1" style="width: 100%;height: 400px;"></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-5 yuanjiao">工程构成图</div>
                            <div class="ibox shortcut">
                                <div id="divChart2" style="width: 100%;height: 400px;"></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-5 yuanjiao">各区县构成</div>
                            <div class="ibox shortcut">
                                <div id="divChart3" style="width: 100%;height: 400px;"></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-6">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-6 yuanjiao">工程分布图</div>
                            <div style="margin-top:20px">
                                <div id="divChart4" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">各区县工程量</div>
                            <div style=" margin-top: 20px;height: 400px;overflow: auto">
                                <table class="table table-bordered " >
                                    <tbody>
                                    <tr id="tr">
                                        <th>区县</th>
                                        <th>水库</th>
                                        <th>闸坝</th>
                                        <th>河道</th>
                                    </tr>
                                    </tbody>
                                </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
</body>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript">
    /*全市工程总数*/
    var myChart1= echarts.init(document.getElementById('divChart1'));
    option = {
        series: [{
            name: '',
            type: 'liquidFill',
            data:[],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 个',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '99%'
        }]
    };
    myChart1.setOption(option);
    var fnChart1=function(){
        $.get('<%=basePath%>/topic/water/floodAndDry/getquanshigongchengzongshu.action').done(function (result) {
            myChart1.setOption({
                series: [{
                    data: [{
                        name:result.data,
                        value: 1
                    }]
                }]
            });
        })
    }
    fnChart1();

    /*工程构成图*/
    var myChart2= echarts.init(document.getElementById('divChart2'));
    option = {
        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:[]
            }
        ]
    };
    myChart2.setOption(option);
    var fnChart2=function(){
        $.get('<%=basePath%>/topic/water/floodAndDry/getgongchengguozaotu.action', function (result) {
            myChart2.setOption({
                legend: {
                    data:result.data.names
                },
                series:[{
                    data:result.data.list
                }]
            });
            myChart2.on('click', function (params) {
                fnChart3(params.name) ;
            });
        })
    }
    fnChart2();

    /*各区县构成图.工程*/
    var projectType='水库'
    var myChart3= echarts.init(document.getElementById('divChart3'));
    option = {
        title : {
            text: ''
        },
        tooltip : {
            trigger: 'item',
            formatter: function(params){
                return params.data.name+':<br/>'+params.data.temp1+":("+params.data.value+"个)";
            }
        },
        legend: {
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            orient: 'vertical',
            left: 'right',
            data:''
        },
        series : [
            {
                name: '',
                type: 'pie',
                radius : '55%',
                center: ['40%', '60%'],
                label:{show:false},
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart3.setOption(option);
    var fnChart3=function(projectType){
        $.get('<%=basePath%>/topic/water/floodAndDry/getqvxiangongchenggouzaotu.action',{projectType:projectType}, function (result) {
            myChart3.setOption({
                legend: {
                    data:result.data.names
                },
                series:[{
                    data:result.data.list
                }]
            });
        })
    }
    fnChart3(projectType);


    /*工程分布图*/
    var falg1 = 0 ;
    $.ajax({
        url: "<%=basePath%>/resource/json/mapStyle.json",
        dataType: "json",
        success: function (data) {
            map.setMapStyle({
                styleJson: data
            });
        }
    })
    var map = new BMap.Map("divChart4");
    var point = new BMap.Point(115.675402, 37.745191);
    map.centerAndZoom(point, 15);
    $.get("<%=basePath%>/topic/water/gongqing/getgongchengfengbutu.action",
    function (result) {
        var datas=result.data;
        if (datas.length > 0) {
            for (var i = 0; i < datas.length; i++) {
                (function (x) {
                        var sContent =
                            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>工程类型：" + datas[i].projectType + "</h4>" +
                            "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>工程名称：" + datas[i].projectName + "</p>" +
                            "</div>";
                        var pt = new BMap.Point(datas[i].longitude, datas[i].latitude);
                        var myIcon = new BMap.Icon("<%=basePath%>/resource/images/education/小学.png", new BMap.Size(40, 40));
                        var marker = new BMap.Marker(pt, {icon: myIcon});  // 创建标注
                        var infoWindow = new BMap.InfoWindow(sContent);
                        map.centerAndZoom(point, 15);
                        marker.addEventListener("click", function () {
                            this.openInfoWindow(infoWindow);
                        });
                        map.addOverlay(marker);
                })(i);
            }
        }
    }, "json")



    /*各区县工程量*/
    $.get('<%=basePath%>/topic/water/gongqing/getgeqvxiangongchengshu.action',function(result){
       var data=result.data;
       var html='';
       for(var i=0;i<data.length;i++){
            html+='<tr><th>'+data[i].name+'</th>' +
                '   <th>'+data[i].temp1+'</th>' +
                '   <th>'+data[i].temp2+'</th>' +
                '   <th>'+data[i].temp3+'</th></tr>'
       }
        $('#tr').after(html);
    })
</script>
</html>